HTML5 Canvas 调整大小和上下文坐标答案

【问题标题】：HTML5 Canvas resize and context coordinatesHTML5 Canvas 调整大小和上下文坐标
【发布时间】：2013-08-21 09:46:33
【问题描述】：

我正在尝试将图像绘制到我的画布中。我已经在 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 定义是正确的。

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

谢谢。

【问题讨论】：

标签： html canvas resize

【解决方案1】：

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

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

【讨论】：