路徑是繪制自定義圖形的好方法，在canvas中通過(guò)beginPath()方法開(kāi)始繪制路徑，這個(gè)時(shí)侯你就可以繪制直線、曲線等，繪制完成后調(diào)用 fill()和stroke()完成填充和設(shè)置邊框，通過(guò)closePath()方法結(jié)束路徑的繪制。下面的例子講演時(shí)如何繪制路徑：
<b>canvas繪制路徑</b><br/><canvas id="myCanvas" width="300" height="200" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var myCanvas = document.getElementById("myCanvas"); if (!myCanvas.getContext) { alert("Your browser does not support the canvas element."); } else { var myContext = myCanvas.getContext("2d"); myContext.fillStyle = '#0000ff'; myContext.strokeStyle = '#ff0000'; myContext.lineWidth = 2; myContext.beginPath(); myContext.moveTo(30, 30); myContext.lineTo(150, 30); myContext.lineTo(150, 120); myContext.lineTo(90, 100); myContext.lineTo(120, 60); myContext.lineTo(30, 30); myContext.fill(); myContext.stroke(); myContext.closePath(); } </script>說(shuō)明
?。保┰讷@得渲染上下文后，設(shè)置了填充色、邊框色和邊框?qū)挾取?br /> ２）調(diào)用beginPath()方法開(kāi)始繪制路徑
?。常┩ㄟ^(guò)lineTo()方法繪制一個(gè)閉合的自定義圖形
?。矗┱{(diào)用fill()方法進(jìn)行填充
?。担┱{(diào)用stroke()方法設(shè)置邊框
?。叮┱{(diào)用closePath()方法結(jié)束路徑的繪制
新聞熱點(diǎn)
疑難解答
圖片精選
