当我更改画布的宽度或高度时，为什么这段代码会让我的 Visual Studio 实时预览和浏览器变得疯狂？有时刷新页面几次或关闭并打开实时预览后它会起作用，但我不明白为什么它会让一切变得疯狂。 当我将高度和宽度以及 400 的相同比例设置为 400 时，一切正常，但是当我将其更改为 300 时，它会变得疯狂。它应该适用于任何高度或宽度。
<!DOCTYPE html>
<html>
<head>
<style>
canvas {
border: 10px solid rgb(0, 0, 0);
border-radius: 3em;
padding: 40px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
document.addEventListener("DOMContentLoaded", function () {
function drawPixels(ctx, x1, y1, x2, y2, pixelSize, color) {
const dx = Math.abs(x2 - x1);
const dy = Math.abs(y2 - y1);
const sx = x1 < x2 ? 1 : -1;
const sy = y1 < y2 ? 1 : -1;
let err = dx - dy;
let x = x1;
let y = y1;
while (true) {
ctx.fillStyle = color;
ctx.fillRect(x, y, pixelSize, pixelSize);
if (x === x2 && y === y2) break;
const err2 = 2 * err;
if (err2 > -dy) {
err -= dy;
x += sx * pixelSize;
}
if (err2 < dx) {
err += dx;
y += sy * pixelSize;
}
}
}
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var pixelSize = 20;
var rectWidth = canvas.width;
var rectHeight = canvas.height;
canvas.height += pixelSize;
var sq = Math.min(rectHeight, rectWidth);
console.log(sq);
var x1 = 0;
var y1 = sq;
var x2 = sq / 2;
var y2 = 0;
var x3 = sq;
var y3 = sq;
drawPixels(ctx, x1, y1, x2, y2, pixelSize, "red");
drawPixels(ctx, x2, y2, x3, y3, pixelSize, "red");
drawPixels(ctx, x3, y3, x1, y1, pixelSize, "green");
});
</script>
</body>
</html>
这可能是因为您在渲染画布后更改了画布大小（修改它）。