Question

我尝试使用像素艺术中的精灵将网页游戏从Flash转换为HTML5，我看到的是画布与Flash相比模糊，我们可以清晰地辨别像素。

＆＃13;

<!DOCTYPE html>
<html>
<body>
  <canvas id="c" style="border: 1px solid black;"></canvas>
  <script>
  var ctx = document.getElementById("c").getContext("2d");
  ctx.imageSmoothingEnabled = false;
  var img = new Image();
  img.src = "https://i.imgur.com/kSEDvba.png";
  ctx.drawImage(img,10,10);
  </script>
</body>
</html>

＆＃13;

是的，它很轻微，但我还是想解决它。我已经尝试了ctx.imageSmoothingEnabled = false;和the solution given by DiveintoHTML5，但它没有帮助。

感谢您的帮助。

Answer 1

将以下css规则应用于canvas元素

铬： image-rendering: pixelated;

火狐： image-rendering: optimizespeed;

使用<canvas>模糊图像

1 个答案: