Question

我使用javascript获得了以下HTML5：

<!DOCTYPE html>
<html>
<head>
<style>
canvas {width:200px; height:200px;
        border: solid blue 1px  }
</style>
</head>
<body>
<canvas id="myCanvas" ></canvas>
<script>
var canvas, ctx, i, tLineH = 70;

canvas = document.getElementById('myCanvas');
ctx = canvas.getContext('2d');

for(i=0; i<50; i++){
    ctx.lineWidth = 1;
    ctx.moveTo(i*3+0.5, tLineH-15);
    ctx.lineTo(i*3+0.5, tLineH+15);
    ctx.stroke();
}

for(i=200; i<240; i+=4){
    ctx.lineWidth = 2;
    ctx.moveTo(i, tLineH-30);
    ctx.lineTo(i, tLineH-15);
    ctx.stroke();
}
</script>
</body>
</html>

生成第一张图像。如果我颠倒 for 的顺序循环绘制第二张图片！如果我将画布的高度更改为300px 绘制第三张图片!!

我会在这里发布图片以显示会发生什么，但我没有足够的声望点，所以我将它们放在https://www.dropbox.com/s/dun1vr4vjju3u7c/canvasTests.PNG?dl=0

我希望有人可以解释为什么当代码看起来相同时，代码会产生不同的结果。

谢谢，杰拉德

Answer 1

请勿使用css更改画布的宽度和高度。在javascript中，将其设置为：

ctx.canvas.height = 200;
ctx.canvas.width = 200;

使用css设置值将拉伸画布，而使用javascript设置它会调整大小。

不一致的HTML5画布结果

1 个答案: