调整画布大小时，画布绘图会变形

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 像素的位图缩放到其他会导致质量差的东西。始终缩放位图，然后重绘（因为画布将被清除）。

Answer 2

canvas API 仅用于在光栅中绘制。这就是为什么它在调整大小时不保持清晰度。这是意料之中的事。

如果您想制作矢量，则必须改用 SVG（可缩放矢量图形）。但是 SVG 不支持绘图。生成 SVG 基本上是通过 XML，所以不像 canvas API 那样灵活。

这里有一个库，可以帮助您完成在矢量画布上的绘制：

http://paperjs.org/

“Paper.js 是一个在 HTML5 Canvas 之上运行的开源矢量图形脚本框架。”

这是另一个列举更多选项的线程：

HTML5 Canvas Vector Graphics?