search

craftyjs / Crafty

JavaScript Game Engine
http://craftyjs.com
MIT License
3.39k stars 561 forks source link

When using canvas to display pictures, the edges of pictures are blurred #1211

Open zhaogang96 opened 4 years ago

zhaogang96 commented 4 years ago

When using canvas to display pictures, the edges of pictures are blurred It looks like this

1

There is my code

  Crafty.init(SCREEN_WIDTH, SCREEN_HEIGHT, document.querySelector("#game"));

  Crafty.sprite(621, 621, "img/wheel.png", {
    wheel: [0, 0]
  });

  // use canvas
  Crafty.e("2D, Canvas, wheel").attr({
    x: 0,
    y: 0,
    w: 100,
    h: 100
  });

  // use dom
  Crafty.e("2D, DOM, wheel").attr({
    x: 101,
    y: 101,
    h: 100,
    w: 100
  });
  Crafty.background("rgb(0,0,0)");

Is there any solution?

rBok6 commented 4 years ago

Check this, I hope that helps:

http://craftyjs.com/api/Crafty-pixelart.html