html - 图像尺寸与 Canvas 尺寸不匹配

Question

我做了这样的 Canvas ，

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

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

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 ，与 Canvas 大小相同。

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

为什么我的 png 不适合？

Answer 1

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

<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
});