在 javascript 个动画中创建许多相似的元素

Question

对于 javascript 动画，我正在尝试创建带有数字 1-9 的按钮。现在我的 javascript 数字 1 看起来像：

that1 = { thisx : 120, thisy: H-400, thisnumber= "1",

draw: function() {
    var keywidth = 100; 
    var keyheight = 150 ; 
    var x = this.thisx;
    var y = this.thisy;
    var cornercut = 5;
ctx.beginPath();

//drawing the key
ctx.moveTo(x, y+cornercut);
ctx.quadraticCurveTo(x,y, x+cornercut, y);
ctx.lineTo(x+keywidth-cornercut, y);
ctx.quadraticCurveTo(x+keywidth, y, x+keywidth, y+cornercut);
ctx.lineTo(x+keywidth, y+keyheight-cornercut);
ctx.quadraticCurveTo(x+keywidth, y+keyheight, x+keywidth-cornercut, y+keyheight);
ctx.lineTo(x+cornercut, y+keyheight);
ctx.quadraticCurveTo(x, y+keyheight, x, y+keyheight-cornercut);
ctx.lineTo(x, y+cornercut);

ctx.closePath();

ctx.stroke();

ctx.fillText(this.thisnumber, x+.5*keywidth,y+.8*keyheight); 

},

highlight: function() {

ctx.fillStyle="red";
ctx.fill();

} 

} ;

我可以只复制它来创建 this2、this3、this4、this5 等，但我觉得有更简单的方法。谁能帮忙？我正在使用 JS，因为我相信这将是使用动画控制这些对象的最简单方法，但如果您有其他建议，请告诉我。

Answer 1

您可以更改 thisx 和 thisy 的值并再次调用 draw 函数，但如果您只是将值作为绘制函数的参数。

在 javascript 个动画中创建许多相似的元素

creating many similar elements in javascript animation

javascript

jquery

animation