stroke和fill順序對繪圖的影響
阿新 • • 發佈：2017-06-23
alt img contex height () images idt tro -c
用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>
stroke和fill順序對繪圖的影響