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

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

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

画布是具有位图的元素。 如果使用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画布矢量图形？