|
canvas绘制直线的代码：
var mycanvas = document.getElementById("myCanvas");
var context = mycanvas.getContext("2d"); //获取canvas 对象上下文, 参数只支持2d
context.beginPath();
context.moveTo(10,10);
context.lineTo(150,150);
context.lineWidth = 1;
context.strokeStyle = "red";
context.stroke();绘制成功，没有问题
canvas连续绘制的折线 var mycanvas = document.getElementById("myCanvas");
var context = mycanvas.getContext("2d"); //获取canvas 对象上下文, 参数只支持2d
context.beginPath();
context.moveTo(10,10);
context.lineTo(150,150);
context.lineWidth = 1;
context.strokeStyle = "red";
context.stroke();
context.strokeStyle = "blue";
context.lineTo(100,100);
context.stroke();
context.lineTo(170,300);
context.strokeStyle = "green";
context.stroke();绘制成功，但是颜色却都是green，因为这里的后面strokeStyle属性会覆盖前面的strokeStyle属性，而stroke()方法的执行会绘制当前所有的状态。
canvas 绘制不同颜色的直线 因此呢，这里就需要使用beginPath()方法来重新进行一次全新的绘制。 注，全新绘制需要再重新设置moveTo，代码如下: var mycanvas = document.getElementById("myCanvas");
var context = mycanvas.getContext("2d"); //获取canvas 对象上下文, 参数只支持2d
context.beginPath();
context.moveTo(10,10);
context.lineTo(150,150);
context.lineWidth = 1;
context.strokeStyle = "red";
context.stroke();
context.beginPath();
context.moveTo(150,150);
context.lineTo(100,100);
context.strokeStyle = "blue";
context.stroke();
context.beginPath();
context.moveTo(100,100);
context.lineTo(170,300);
context.strokeStyle = "green";
context.stroke();然后，就可以成功绘制不同颜色的直线。
如果你有更简单的方法，欢迎分享 |
|
|
公众号
