Question

我正在尝试创建一个显示我的'玩家'最后一步的功能，但是当我尝试时它显示没有错误和/或线条。这是我的代码：

ctx.clearRect(0, 0, canvas.width, canvas.height );
ctx.drawImage(backgroundImg,0,0,canvas.width, canvas.height)

for (var i = 0; i < team1X.length; ++i) {
    ctx.drawImage(playerImg,X[i],Y[i])
}

//this part doesn't work
for (var i = 0; i < X.length; ++i) {
        ctx.beginPath();
        ctx.moveTo(LastX[i],LastY[i]);
        ctx.lineTo(X[i],Y[i]);
        ctx.stroke();
}

X，Y，LastX和LastY是包含11个数字的数组。

Answer 1

您的代码在语法上是正确的。它没有错。但是，您需要在问题中添加一些上下文并自行进行一些调试，确保正确实例化ctx变量并且X和Y包含想要的数据。这是一个工作简约的例子：

var c = document.getElementById('canvasElement');
var ctx = c.getContext('2d');
var X = [10,20,30,40,50,60];
var LastX = [50,140,230,320,410,500];
var Y = [10,90,30,40,50,60];
var LastY = [10,90,30,40,50,60];

for (var i = 0; i < X.length; ++i) {
        ctx.beginPath();
        ctx.moveTo(LastX[i],LastY[i]);
        ctx.lineTo(X[i],Y[i]);
        ctx.stroke();
}

<canvas id="canvasElement" width="500" height="250"></canvas>

html5画布绘制多行

1 个答案: