Question

我正在使用html canvas和javascript（试图远离jQuery）处理Sketchpad应用程序。画布需要响应，并且我已经找到了几种方法，但是每一种都伸出画布并使画板无法使用。没有看到问题就很难解释。这是CodePen。尝试在画布内画画，你会看到我在说什么。我用来调整画布大小的当前方法包括offsetWidth和offsetHeight，如下所示：

var sketchpadContainer = [
    document.getElementById('container').offsetWidth, 
    document.getElementById('container').offsetHeight]

var canvas = document.getElementById('sketchpad');

canvas.style.height = sketchpadContainer[1] + "px";
canvas.style.width = sketchpadContainer[0] + "px";

有没有办法让画布响应，同时保持草图的尺寸不变？

Answer 1

CSS宽度和高度属性与Canvas元素上的width和height属性不同。

如果您绝对需要使用css来设置宽度/高度，请保持默认画布大小的比例因子，然后将鼠标位置的目标x和y位置乘以x / y比例因子的倒数（或者只需将目标位置除以它们。）

使用css来调整画布的大小有点太糟糕了（会让你的线条变得模糊），我强烈建议你改变画布的宽度/高度属性，然后使用CanvasRenderingContext2D.scale()来改变大小您的线条（但仍然需要使用比例因子来计算您的真实鼠标位置）

只需更改

canvas.style.height = sketchpadContainer[1] + "px";
canvas.style.width = sketchpadContainer[0] + "px";

到

canvas.height = sketchpadContainer[1];
canvas.width = sketchpadContainer[0];

首次获取上下文时应用CanvasRenderingContext2D.scale()，然后按照上面的说明操作。（ctx.lineTo(x,y); - ＆gt; ctx.lineTo(x/scaleFactorX,y/scaleFactorY);＆amp; lastX=x; - ＆gt; lastX=x/scaleFactorX;）

I.E见HERE

调整大小以适合使用＆＃39; offsetWidth＆＃39;的父Div时，HTML Canvas无法正确显示

1 个答案: