是否可以挂接到已经绘制好的 Canvas 动画? 我正在尝试创建 3 个单独的轨道,它们必须由“开始”和“停止”按钮控制,但是当按下第一个 Canvas 的开始按钮时,它会运行最后一个 Canvas 。
这就是我目前所拥有的。
class Animation{
constructor(){
this.options = {
left : 0,
animate : false
}
let tracks = $('.line');
let self = this;
tracks.each(function(){
self.startbtn = $(this).find('button.start');
self.stopbtn = $(this).find('button.stop');
self.canvas = $(this).find('canvas').get(0);
self.canvas.width = 1000;
self.canvas.height = 30;
self.ctx = self.canvas.getContext('2d');
self.draw(self.canvas,self.ctx);
self.startbtn.bind('click',() => {
self.options.animate = true;
self.draw(self.canvas,self.ctx);
})
});
}
draw(c,ctx){
ctx.clearRect(0,0,c.height,c.width);
ctx.fillRect(this.options.left,0,1,30);
if(this.options.animate){
requestAnimationFrame(() => {
console.log('done');
this.options.left += 1;
console.log(this.options.left)
this.draw(c,ctx);
});
}
}
}
new Animation();
最佳答案
您的代码存在范围问题,您必须确保每个轨道都与其构造函数分开运行。
这是我确保信息对于给定轨道/父元素完全独立的地方。
this.options = *set*;//left and animate separate for own process
this.node = *set*;//nodes for each track
this.ctx = *set*;//draw command context set at the parent
this.draw = *set*;//draw function moved to track
这是对您的代码的完整编辑:
class Animation{
constructor(){
var tracks = $('.line');
var self = this;
tracks.each(function () {
this.options = {//options seperate to parent track node
left: 0,
animate: false
};
this.node = {//store child nodes for access
startbtn: $(this).find('button.start'),
stopbtn: $(this).find('button.stop'),
canvas: $(this).find('canvas').get(0)
};
this.node.canvas.width = 1000;
this.node.canvas.height = 30;
this.ctx = this.node.canvas.getContext('2d');
this.node.startbtn.bind('click',() => {// () => parentNode instantiation
this.options.animate = true;
this.draw(this.node.canvas, this.ctx);
});
this.draw = self.draw;
});
}
draw(c,ctx){
parent = c.parentNode;
ctx.clearRect(0,0,c.height,c.width);
ctx.fillRect(parent.options.left,0,1,30);
if(parent.options.animate){
requestAnimationFrame(() => {
console.log('done');
parent.options.left += 1;
console.log(parent.options.left)
parent.draw(c,ctx);
});
}
}
}
new Animation();
需要完成范围和对象处理。
关于javascript - 控制多个 Canvas 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39000816/