在使用HTML5画布时,如何保存javascript变量/数组的特定路径,然后对其进行操作?这是我到目前为止所做的事情:
ctx.beginPath();
ctx.moveTo(lastX,lastY);
ctx.lineTo(x,y);
ctx.lineWidth = s*2;
ctx.stroke();
ctx.closePath();
现在,我需要的是能够有时将此路径存储在数组中.然后,我需要能够返回并稍后更改数组中所有路径的颜色. (显然,我也不知道该怎么做.)
最佳答案
您可以序列化将路径绘制到javascript对象中所需的所有数据
原文链接:https://www.f2er.com/js/429829.html使用javascript对象的好处是,如果需要将路径移动到其他位置(例如返回服务器),则可以进一步将对象序列化为JSON.
var path1={
lineWidth:1,stroke:"blue",points:[{x:10,y:10},{x:100,y:50},{x:30,y:200}]
};
然后,您可以使用该对象绘制/重绘该路径
function draw(path){
// beginPath
ctx.beginPath();
// move to the beginning point of this path
ctx.moveTo(path.points[0].x,path.points[0].y);
// draw lines to each point on the path
for(pt=1;pt
要更改路径的颜色,只需更改对象的stroke属性并再次调用draw():
paths[0].stroke="orange";
paths[1].stroke="green";
draw();
这是代码和小提琴:http://jsfiddle.net/m1erickson/McZrH/