html - HTML5 Canvas 调整大小和上下文坐标

Question

我正在尝试将图像绘制到我的画布中。我已经在 html 中定义了我的画布并使用 JS 调整它的大小。

var can = document.getElementById('myCanvas');
can.style.width = (window.innerWidth-20) + "px";
can.style.height = "860px";
var context=can.getContext("2d");
var img=document.getElementById("boje");
context.drawImage(img,50,0,400,140);

当我使用 drawImage 函数（例如，图像的大小更大）时，位置和大小属性的坐标对调整后的画布不正确。例如，如果我在 JS 调整大小之前在 html 中定义画布的尺寸，则坐标对 html 定义是正确的。

是否可以“重置”二维上下文以使用调整后画布的真实坐标？

谢谢你。

Answer 1

您没有使用 JS 调整它的大小，而是使用 CSS ( style) 调整了它的大小。这只是像任何其他图像一样缩放它。直接设置width和height属性：

can.width = (window.innerWidth-20);
can.height = 860;