<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>封閉圖形填充和clothpath</title> </head> <body> <div> <canvas id="canvas" width="800px" height="800px"></canvas> </div> <script type="text/javascript"> var dom=document.getElementById("canvas"); var ctx=dom.getContext('2d'); ctx.lineWidth=10; ctx.beginPath();//清楚所有的點 ctx.lineTo(100,200);//從上一個點開始到指定的點 ctx.lineTo(300,400); ctx.lineTo(100,600); ctx.closePath(); ctx.strokeStyle="#c12121"; ctx.stroke(); ctx.fillStyle="#054"; ctx.fill();//實心填充 </script> </body> </html>
演示圖