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

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 API仅用于在栅格中绘图。这就是为什么它在调整大小时不能保持清晰的原因。这是可以预料的。

如果您想制作矢量图，则必须使用SVG（可缩放矢量图形）。但是SVG并不支持绘图。生成SVG基本上是通过XML实现的，因此它的灵活性与canvas API相同。

这是一个帮助您在向量中完成绘制到画布的库：

http://paperjs.org/

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

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

HTML5 Canvas Vector Graphics?

Answer 2

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

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

通过执行此操作设置正确的大小（并且通常不需要CSS）：

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

或在JavaScript中：

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

如果您使用CSS，或者使用元素中的规则或样式属性，要缩放画布，您只会将300x150像素位图缩放到其他会产生质量差的位图。始终缩放位图，然后重绘（因为画布将被清除）。