??? ??? ?
Context ??? BeginPath ???? ?? ??? ??? ????, moveTo(x, y) ???? ??? ?????? ????, lineTo(x, y) ???? ??? ????? ?????. , ??? ??? ???? ?? ? ??? ?????. moveto ? lineto ???? ?? ? ??? ? ????. ????? closePath ???? ???? ?? ??? ????? ???? ??? ?? ?? ??? ??? ? ???? lineto ???? ? ? ??? ??? ????.
??? ??? ????.
<body> <canvas id="demoCanvas" width="500" height="600"> </canvas> <script type="text/javascript"> //通過id獲得當(dāng)前的Canvas對象 var canvasDom = document.getElementById("demoCanvas"); //通過Canvas Dom對象獲取Context的對象 var context = canvasDom.getContext("2d"); context.beginPath(); // 開始路徑繪制 context.moveTo(20, 20); // 設(shè)置路徑起點(diǎn),坐標(biāo)為(20,20) context.lineTo(200, 200); // 繪制一條到(200,20)的直線 context.lineTo(400, 20); context.closePath(); context.lineWidth = 2.0; // 設(shè)置線寬 context.strokeStyle = "#CC0000"; // 設(shè)置線的顏色 context.stroke(); // 進(jìn)行線的著色,這時(shí)整條線才變得可見 </script> </body>