HTML畫布 - 間隔後繪製形狀

下面的腳本繪製了4個帶有圖像的曲線矩形。儘管在調用繪製它們的函數之前使用了2500毫秒的setInterval，但它一次全部繪製它們。我希望立即繪製第一個矩形（即左上角），然後在其後繪製其他矩形（每2.5秒繪製一個矩形）。爲什麼這個功能不這樣做，它是如何做到的？任何幫助將不勝感激。HTML畫布 - 間隔後繪製形狀

var c=document.getElementById('game'), 
 
\t \t 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> 
 
\t <meta charset="UTF-8"> 
 
\t <title>uTalk Demo</title> 
 
\t <link rel='stylesheet' type='text/css' href='game.css' media='screen'></style> 
 
</head> 
 
<body> 
 
\t <canvas id="game" width = "750" height = "500"></canvas> 
 
</body> 
 
</html>

來源

2017-05-07 Jonathan Connell

替換

setInterval(this.shapes[i].makeCurvedRect(), 2500);

與返回值與結合函數

setTimeout(curvedRect.prototype.makeCurvedRect.bind(this.shapes[i]), 2500 * i);

或脂肪箭頭函數立即和建築材料setInterval()執行makeCurvedRect()

setTimeout(() => this.shapes[i].makeCurvedRect(), 2500 * i);

其中每個矩形的延遲增加2500。

來源

2017-05-07 18:20:27

HTML畫布 - 間隔後繪製形狀

回答

相關問題