调整画布大小时画布绘图会失真

Question

我正在使用 html5 和 javascript 在画布上实现绘图。

如果我不手动设置画布宽度和高度（保持默认），我的绘图效果很好。

但是，当我从 css 或 javascript 设置画布大小时，我的绘图看起来像扭曲了。线条开始稍微远离线条，线条看起来扭曲。

这是 mousedown 事件的代码。

if (mouseDown)
    {
        previousX = currentX;
        previousY = currentY;
        currentX = e.clientX - canvas.offsetLeft;
        currentY = e.clientY - canvas.offsetTop;
        ctx.beginPath();
        ctx.moveTo(previousX, previousY);
        ctx.lineTo(currentX, currentY);
        ctx.strokeStyle = color;
        ctx.lineWidth = y;
        ctx.stroke();
        ctx.closePath();
    }

Answer 1

您必须使用其正确的属性/属性设置画布的大小。

Canvas 是一个带有位图的元素。如果您使用 CSS 或样式，则只会缩放元素，而不是位图。结果是一张模糊的图像。

通过这样做设置正确的大小（通常不需要 CSS）：

<canvas width=800 height=800></canvas>

或在 JavaScript 中：

canvas.width = 800;    // example size
canvas.height = 800;

如果您使用 CSS，无论是在元素中使用规则还是样式属性，来缩放画布，您只会将 300x150 像素位图缩放到其他会导致质量不佳的东西。始终缩放位图，然后重绘（因为画布将被清除）。