Question

我有一个画布标签，我用它画线，画布是一个正方形。我使用“space”来记录两行之间的空格。我有canvasWidth和canvasHight来记录画布大小，实际上，它们是相同的numnber .... 320

        var x=0;
        for (var i = 0; i < 5; i++) {
            x = parseInt(x + space);

            myCanvas.fillStyle = "rgb(200,0,0)";
            myCanvas.fillRect(x, 1, 1, canvasHeight);
            myCanvas.fillStyle = "rgb(0,200,0)";
            myCanvas.fillRect(1, x, canvasWidth, 1);

        }

我可以使用绘制画布上的所有红线，但绿线只能在画布上画两个，其他只是不能出现，我使用了try {} catch，它没有错误消失。

Answer 1

您使用的浏览器是什么？

问题似乎不在你所展示的代码中，因为它适用于我。

这是我的示例html：

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" height="320" width="320" />

<script language="javascript">
var myCanvas = document.getElementById('myCanvas').getContext('2d');
var space = 10;
var x=0;
var canvasHeight = 320;
var canvasWidth = 320;
for (var i = 0; i < 5; i++) {
    x = parseInt(x + space);

    myCanvas.fillStyle = "rgb(200,0,0)";
    myCanvas.fillRect(x, 1, 1, canvasHeight);
    myCanvas.fillStyle = "rgb(0,200,0)";
    myCanvas.fillRect(1, x, canvasWidth, 1);

}
</script>

</body>
</html>

Answer 2

为什么使用parseInt，你的空间变量是否有字符串类型？如果没有，请尝试删除parseInt。

帆布标签绘图线问题....

2 个答案: