Canvas 调整大小时绘图变形 canvas

Question

我正在使用 html5 和 javascript 在 canvas 上进行绘图。

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

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

这里是 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 API 仅适用于光栅绘图。这就是为什么它在调整大小时不保持清晰度的原因。值得期待。

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

这是一个库，可以帮助您完成 canvas 向量中的绘图：

http://paperjs.org/

"Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas."

这是另一个线程，它列举了更多选项：

HTML5 Canvas Vector Graphics?

Answer 2

您必须使用正确的 properties/attributes 设置 canvas 的大小。

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

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

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

或 JavaScript:

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

如果您使用 CSS，使用元素中的规则或样式属性来缩放 canvas，您只会将 300x150 像素的位图缩放到其他图像，这会导致质量不佳.始终缩放位图然后重绘（因为 canvas 将被清除）。

Canvas 调整大小时绘图变形 canvas

Canvas drawing gets distorted when resizing canvas

html

javascript

canvas