window.onload = function () { //得到2D渲染上下文 var context = document.getElementById("myCanvas").getContext("2d"); //填充一个矩形 var x = 40, y = 40; context.fillStyle = "blue"; //设置填充色 context.fillRect(x + 5, y + 5, 40, 90); //绘制一个矩形边框 context.strokeStyle = "red"; //设置画笔色 context.strokeRect(x, y, 50, 100); context.beginPath(); //beginPath1 context.moveTo(10, 10); context.lineTo(150, 50); context.lineTo(140, 33); context.strokeStyle = "green"; context.stroke(); context.beginPath(); //beginPath2 context.moveTo(22, 22); context.lineTo(10, 50); context.lineTo(30, 100); context.closePath(); //closePath可以让线条闭合 context.strokeStyle = "#0000FF"; context.fill();//填充线条轮廓区域 };
beginPath的作用是开辟新的绘图路径,不会影响其他路径,如把beginPath2注释掉后,运行会出现2个封闭被#0000FF填充的三角形,即使在beginPath1中使用stroke画出了线条,也会被重绘。
所以一般要画和之前的线条不一样的设置时首先要用beginPath开辟新绘图路径再继续画,才不会影响先前的绘图