Javascript 调整画布大小时，画布图形会扭曲

我正在用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();
    }

---

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

如果要生成矢量，则必须使用SVG（可缩放矢量图形）。但是SVG不支持绘图。SVG的生成基本上是通过XML进行的，因此它不像CanvasAPI那样灵活

以下是一个库，它将帮助您在vector中完成画布绘制：

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

下面是另一个线程，其中列举了更多选项：

---

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

画布是带有位图的元素。如果使用CSS或样式，则只缩放元素，而不缩放位图。结果是图像模糊

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

---

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

Hm是的，但在html5中只能在默认大小的画布上绘制，而不能选择自己的画布，这难道不奇怪吗…@nejclovenic Check post。我添加了一个库，可以帮助您在vector中写入画布。如果这对你有帮助的话，请投票并标记正确。@NejcLovrencic我不知道你的意思。您可以将画布大小设置为您想要的任何大小。@shmuli只有在必须使用相同的位图进行缩放时，这才是正确的。如果你能像画布一样重画，那就没什么区别了。SVG还需要光栅化才能显示在屏幕上。Canvas也使用与SVG类似的路径，但图形图像或视频除外（对于嵌入位图/图像，同样的限制也适用于SVG）。除此之外，问题在于开发人员如何处理，而不是画布。我的2美分..@shmuli您必须在画布改变大小时重新绘制画布，因为它将被清除。虽然OP没有在这里显示他的设置代码，但他可能正在使用CSS将默认的300x150缩放到某种程度，这意味着画布的位图被缩放。他需要使用宽度/高度属性，然后重新绘制（点可以存储在数组中等）。这很有效，谢谢！而且，使用这个，如果我在画布上向下滚动（当画布不适合屏幕时），鼠标在画图时会离开线条。为什么不打开一个新问题呢？

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

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