HTML5 - Canvas, drawImage()绘制图像模糊

11 浏览
0 Comments

HTML5 - Canvas, drawImage()绘制图像模糊

尽管已定义了画布的尺寸，但我尝试在画布上绘制以下图像时，它看起来模糊。如下所示，图像清晰明晰，而在画布上，它却模糊且呈像素化状态。

我做错了什么？

console.log('Hello world')
var c = document.getElementById('canvas')
var ctx = c.getContext('2d')
var playerImg = new Image()
// http://i.imgur.com/ruZv0dl.png 是一个清晰、明晰的图像
playerImg.src = 'http://i.imgur.com/ruZv0dl.png'
playerImg.width = 32
playerImg.height = 32
playerImg.onload = function() {
  ctx.drawImage(playerImg, 0, 0, 32, 32);
};


#canvas {
  background: #ABABAB;
  position: relative;
  height: 352px;
  width: 512px;
  z-index: 1;
}

0