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定义是真的。

是否可以“重置”2d上下文以使用调整大小的画布的实际坐标？

谢谢。

Answer 1

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

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