Canvas繪制線條
Context對象的beginPath方法表示開始繪制路徑,moveTo(x, y)方法設(shè)置線段的起點,lineTo(x, y)方法設(shè)置線段的終點,stroke方法用來給透明的線段著色。moveto和lineto方法可以多次使用。最后,還可以使用closePath方法,自動繪制一條當前點到起點的直線,形成一個封閉圖形,省卻使用一次lineto方法。
代碼如下:
<body> <canvas id="demoCanvas" width="500" height="600"> </canvas> <script type="text/javascript"> //通過id獲得當前的Canvas對象 var canvasDom = document.getElementById("demoCanvas"); //通過Canvas Dom對象獲取Context的對象 var context = canvasDom.getContext("2d"); context.beginPath(); // 開始路徑繪制 context.moveTo(20, 20); // 設(shè)置路徑起點,坐標為(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(); // 進行線的著色,這時整條線才變得可見 </script> </body>
扔個三星炸死你
這個有點小難
8年前 添加回復 0