HTML画布-间隔后绘制形状
[英]HTML Canvas - Draw Shape after Interval
问题描述
The script below draws 4 curved rectangles with images in them. 
下面的脚本绘制了4个弯曲的矩形，其中包含图像。 It draws them all at once despite using a setInterval of 2500 milliseconds before calling the function that draws them. 尽管在调用绘制它们的函数之前使用了2500毫秒的setInterval ，但它一次绘制了所有对象。 I would like the first rectangle (ie top-left) to be drawn immediately, and then the other rectangles to be drawn after that one (with one being drawn every 2.5 seconds). 我希望立即绘制第一个矩形（即左上角），然后再绘制另一个矩形（每2.5秒绘制一个矩形）。 Why does this function not do this and how can it be done? 为什么此功能不能做到这一点，怎么办？ Any help will be appreciated. 任何帮助将不胜感激。
var c=document.getElementById('game'), ctx=c.getContext('2d'); var images = ['https://i.stack.imgur.com/tXmPa.png', 'https://i.stack.imgur.com/KGhCL.png', 'https://i.stack.imgur.com/s5xu4.png', 'https://i.stack.imgur.com/g6BO0.jpg'] var curvedRect = function(id, selectionnum, x, y, w, h) { this.id = id; this.selectionnum = selectionnum; this.x = x; this.y = y; this.w = w; this.h = h; } curvedRect.prototype.makeCurvedRect = function() { var img=new Image(); img.src=images[this.selectionnum]; ctx.beginPath(); ctx.lineWidth='8'; ctx.strokeStyle='white'; ctx.moveTo(this.x+10, this.y); ctx.lineTo(this.x+this.w-10, this.y); ctx.quadraticCurveTo(this.x+this.w, this.y, this.x+this.w, this.y+10); ctx.lineTo(this.x+this.w, this.y+this.h-10); ctx.quadraticCurveTo(this.x+this.w, this.y+this.h, this.x+this.w-10, this.y+this.h); ctx.lineTo(this.x+10, this.y+this.h); ctx.quadraticCurveTo(this.x, this.y+this.h, this.x, this.y+this.h-10); ctx.lineTo(this.x, this.y+10); ctx.quadraticCurveTo(this.x, this.y, this.x+10, this.y); ctx.stroke(); ctx.drawImage(img, this.x+2.5, this.y+2.5, this.w-5, this.h-5); } var Paint = function(element) { this.element = element; this.shapes = []; } Paint.prototype.addShape = function(shape) { this.shapes.push(shape); } Paint.prototype.render = function() { ctx.clearRect(0, 0, this.element.width, this.element.height); for (var i=0; i<this.shapes.length; i++) { try { setInterval(this.shapes[i].makeCurvedRect(), 2500); } catch(err) {} } } var paint = new Paint(c); var img1 = new curvedRect(1, 0, 200, 55, 150, 150); var img2 = new curvedRect(2, 1, 375, 55, 150, 150); var img3 = new curvedRect(3, 2, 200, 230, 150, 150); var img4 = new curvedRect(4, 3, 375, 230, 150, 150); paint.addShape(img1); paint.addShape(img2); paint.addShape(img3); paint.addShape(img4); paint.render();
canvas { z-index: -1; margin: 1em auto; border: 1px solid black; display: block; background: #FF9900; }
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>uTalk Demo</title> <link rel='stylesheet' type='text/css' href='game.css' media='screen'></style> </head> <body> <canvas id="game" width = "750" height = "500"></canvas> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2017-05-07 18:20:27
Replace 更换
setInterval(this.shapes[i].makeCurvedRect(), 2500);
which executes makeCurvedRect() immediately and supplies setInterval() with the return value with a bound function 它立即执行makeCurvedRect()并为setInterval()提供带有绑定函数的返回值
setTimeout(curvedRect.prototype.makeCurvedRect.bind(this.shapes[i]), 2500 * i);
or a fat arrow function 或粗箭头功能
setTimeout(() => this.shapes[i].makeCurvedRect(), 2500 * i);
where the delay increases by 2500 for each rectangle. 每个矩形的延迟增加2500。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.