stroke和fill順序對繪圖的影響 - fangsmile－IT工程師數位筆記本

文章出處

用canvas繪制線條和填充，fill()和stroke()調用順序直接影響繪制的結構

先調用stroke在調用fill，繪制的效果看上去lineWidth只繪制出來一半，還以為是個大問題。

 1 <!DOCTYPE HTML>
 2 <html>
 3 <body>
 4 <canvas id="myCanvas" width=400 height=300>your browser does not support the canvas tag </canvas>
 5 <script type="text/javascript">
 6 var canvas=document.getElementById('myCanvas');
 7 var ctx=canvas.getContext('2d');
 8 ctx.lineWidth=10;
 9 ctx.fillStyle='#FF0000';
10 ctx.strokeStyle='#000000';
11 ctx.rect(5,5,80,100);
12 ctx.stroke();
13 ctx.fill();
14 </script>
15 </body>
16 </html>

先調用fill在調用stroke，直接就解決了上面繪制的lineWidth只繪制一半的問題！

 1 <!DOCTYPE HTML>
 2 <html>
 3 <body>
 4 <canvas id="myCanvas" width=400 height=300>your browser does not support the canvas tag </canvas>
 5 <script type="text/javascript">
 6 var canvas=document.getElementById('myCanvas');
 7 var ctx=canvas.getContext('2d');
 8 ctx.lineWidth=10;
 9 ctx.fillStyle='#FF0000';
10 ctx.strokeStyle='#000000';
11 ctx.rect(5,5,80,100);
12 ctx.fill();
13 ctx.stroke();
14 </script>
15 </body>
16 </html>