HTML5 - Canvas，drawImage（）绘制图像模糊 [英] HTML5 - Canvas, drawImage() draws image blurry

问题描述

我试图将以下图像绘制到画布，但它似乎模糊，尽管定义了画布的大小。如下图所示，图片清晰透明，而在画布上，图片却模糊不清，并且像素化。

这里是它的外观（左边的是原始的，右边的是画布和模糊的）。

我做错了什么？

getContext（'2d'）var playerImg = new Image（）// http://i.imgur.com/ruZv0dl.png看到一个CLEAR，CRISP imageplayerImg.src ='http://i.imgur.com/ruZv0dl。 png'playerImg.width = 32playerImg.height = 32playerImg.onload = function（）{ctx.drawImage（playerImg，0，0，32，32）;};

pre class =snippet-code-css lang-css prettyprint-override> #canvas {background：#ABABAB;位置：相对; height：352px; width：512px; z-index：1;}

 < canvas id = canvasheight =352width =521>< / canvas>  

解决方案

发生这种情况的原因是因为抗锯齿。
只需将 imageSmoothingEnabled 设置为false即可，

  .imageSmoothingEnabled = false; 
  

以下是一个jsFiddle版本

jsFiddle ： https://jsfiddle.net/mt8sk9cb/

  var c = document.getElementById（'canvas'）
 var ctx = c.getContext（'2d'）
 var playerImg = new Image（）
 
 // http://i.imgur.com/ruZv0dl.png看到一个CLEAR，CRISP镜像
 playerImg.src ='http://i.imgur.com/ruZv0dl.png' 
 
 playerImg.onload = function（）{
 ctx.imageSmoothingEnabled = false; 
 ctx.drawImage（playerImg，0，0，256，256）; 
}; 
  

I am trying to draw the following image to a canvas but it appears blurry despite defining the size of the canvas. As you can see below, the image is crisp and clear whereas on the canvas, it is blurry and pixelated.

and here is how it looks (the left one being the original and the right one being the drawn-on canvas and blurry.)

What am I doing wrong?

console.log('Hello world')

var c = document.getElementById('canvas')
var ctx = c.getContext('2d')
var playerImg = new Image()

// http://i.imgur.com/ruZv0dl.png sees a CLEAR, CRISP image
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;
}

<canvas id="canvas" height="352" width="521"></canvas>

解决方案

The reason this is happening is because of Anti Aliasing. Simply set the imageSmoothingEnabled to false like so

context.imageSmoothingEnabled = false;

Here is a jsFiddle verson

jsFiddle : https://jsfiddle.net/mt8sk9cb/

var c = document.getElementById('canvas')
var ctx = c.getContext('2d')
var playerImg = new Image()

// http://i.imgur.com/ruZv0dl.png sees a CLEAR, CRISP image
playerImg.src = 'http://i.imgur.com/ruZv0dl.png'

playerImg.onload = function() {
  ctx.imageSmoothingEnabled = false;
  ctx.drawImage(playerImg, 0, 0, 256, 256);
};

这篇关于HTML5 - Canvas，drawImage（）绘制图像模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！