图片尺寸与 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 id="mainCanvas" width="310" height="212">
 </canvas>

Answer 2

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

图片尺寸与 canvas 尺寸不匹配

Image size doesn't match the canvas size

html

canvas

png