我正在尝试在 Canvas 上绘制图像，如下所示:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,0,0,100,100,0,0,200,200);
Canvas 为 200 像素 x 200 像素，图像要大得多(但样式也为 200 像素 x 200 像素)
正如您在 jsfiddle 中看到的那样 Canvas 不显示图像(我期待图像的一部分)。 我对drawImage的理解(如here所述)是这样的:
- “0,0,100,100”定义图像上的一个矩形，该矩形是绘制到 Canvas 上的部分。 0,0 定义顶 Angular/左上角，100,100 是边的宽度。
- 此矩形绘制在 Canvas 上由 0,0,200,200 定义的矩形内
有什么建议吗？
最佳答案
您的图像实际上是 585 x 585，所以您要做的就是从中剪下一个 Angular (空白)并将其绘制到 Canvas 上，这当然不会显示任何内容。
使用 CSS 缩放图像实际上并不会改变其大小。它只是为了显示而缩放。
所以你需要做的是以图像的原始尺寸为基础。如果您只是想缩小它以适合 Canvas ，您可以这样做:
ctx.drawImage(img, 0, 0, 200, 200);
Canvas 也是如此。不要使用 CSS 缩放 Canvas ，而是设置宽度和高度属性，否则 Canvas 将默认为 300x150(然后由您的 css 缩放):
<canvas width=200 height=200 ...>
<强> Modified fiddle
关于javascript:canvas.drawImage 是如何工作的，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20575708/