Question

我像这样做了帆布，

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

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

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

为什么我的png不适合？

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

Answer 2

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

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

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

2 个答案: