我正在制作一个HTML5项目,用户可以在其中拖放画布中的多个项目..我想记录这些对象在页面加载时以及在画布中移动后的位置。为此,我正在保存所有这些都在数组中使用draw函数内部的canvas的save()方法存储,即使在新位置上绘制对象时也会调用draw函数来存储所有上下文详细信息。
function draw() {
clear();
ctx.fillStyle = "#FAF7F8";
rect(0, 0, WIDTH, HEIGHT);
// redraw each rect in the rects[] array
for (var i = 0; i < rects.length; i++) {
var r = rects[i];
ctx.fillStyle = r.fill;
rect(r.x, r.y, r.width, r.height);
pos[i]= ctx.save();
}
}
我在单击按钮时调用了第一个数组元素的值,以确保正确存储上下文值。
function position(){
alert("pos[0]");
}
当我运行此代码时,在按钮上单击我会在警报框中获得未定义的输出,如下图所示。...
上面代码的js小提琴是
请帮忙..
更好的方法是为每个矩形创建一个新对象。这样,您可以将每个对象及其自身的属性存储在数组中,并在绘制循环的每个循环中重绘它。您可以随时访问该对象上的所有变量,并以更加灵活的方式使用它。
所以我会用这样的东西:
function Rectangle(props){
var posX = this.posX = props.x;
var posY = this.posY = props.y;
this.width = props.width;
this.height = props.height;
this.fill = props.fill;
this.draw = function(){
ctx.fillStyle = this.fill;
ctx.fillRect(this.posX, this.posY, this.width, this.height);
}
}
在此JSFiddle http://jsfiddle.net/hgh2S/中演示了此用法。
我放弃了拖动事件,所有这些都使用例更加清楚。根据此示例,您可以轻松地自己实现它。
另外,请注意我将按钮挂接到侦听器的方式,而不是直接从HTML元素调用JS。这是一种更安全的方法。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句