图像大小与画布大小不匹配答案

【问题标题】：Image size doesn't match the canvas size图像大小与画布大小不匹配
【发布时间】：2015-04-21 02:53:58
【问题描述】：

我做了这样的画布，

<canvas id="mainCanvas" style="width:310px;height:212px;">
</canvas>

然后尝试在我的脚本中将 png 放在画布上

var canvas=document.getElementById("mainCanvas");
var context = canvas.getContext("2d");

var img= new Image();
img.src = "img/player.png";

context.drawImage(img,0,0,310,212);

我的 plyer.png 大小为 312 *212 ，与画布大小相同。

但是，我的 png 文件在画布上展开。因此，右边缘和下边缘从画布突出。

为什么我的 png 不适合？？

【问题讨论】：

标签： html canvas png

【解决方案1】：

所有画布都应指定宽度和高度属性

<canvas width="310" height="212"></canvas>

宽度和高度不应使用“px”。使用javascript：

var c = document.querySelector('canvas');
c.width=310;
c.height=212;// as  Ken Fyrstenberg mentioned

请务必等到图片加载完毕。

img.onload(function(){
   //drawimage
});

【讨论】：

非常感谢它运作良好。这是画布的神秘行为...
否则您将无法缩放画布。有了这个，你可以制作“响应式画布”。默认情况下，我认为分配给 300。
@MaciejPaprocki 是的，在 html 画布元素内调整大小时不要使用“px”。是的，除非另有说明，否则画布默认大小为 300 x 150。
这条线 c-height 应该是 c.height （咀嚼..咀嚼..骑马..说“先生们”，漫步到日落）
谢谢。改变答案

【解决方案2】：

您需要将尺寸应用为属性而不是样式。试试这个：

 <canvas id="mainCanvas" width="310" height="212">
 </canvas>

【讨论】：