logo标签列表

禁用JavaScript Canvas中的图像自动缩放

javascripthtml5-canvasimage-quality
3

我制作了一个基本的贪吃蛇游戏，并且正在尝试改进一个小细节。

你看，当我放置苹果图像[或叶子图像，因为我有一个方便的SVG图像]时，画布会缩放图像并使其变得非常大。

这是我的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>
      Basic Snake Game
    </title>
  </head>
  <body>
    <svg style="width:50px;height:50px;"><polygon points="10,10 10,14 10.5,17 12,23 14,30 16,34 18,36 22,37 25,37 25,30 24.5,28 24,27 23.5,26 11,10" style="fill:lime;stroke:green;stroke-width:1;" /><line x1="10" y1="10" x2="25" y2="37" style="stroke:green;stroke-width:1;" /></svg>
    <script>
      var html = document.querySelector('body');
      html.innerHTML += '<p></p><br/><input type="button" onclick="heading -= 90" value="Left 90*" style="font-size:20pt;"/><input type="button" onclick="heading += 90" value="Right 90*" style="font-size:20pt;"/><canvas style="width:1000px;height:700px;border:3px solid red;"></canvas>';
      var canvas = document.querySelector('canvas');
      var ctx = canvas.getContext('2d');
      var img = document.querySelector('svg');
      var xml = new XMLSerializer().serializeToString(img);
      img = new Image();
      img.src = 'data:image/svg+xml;base64,' + btoa(xml);
      ctx.fillStyle = 'black';
      ctx.fillRect(0, 0, 2000, 1400);
      var width = 15;
      var speed = 1;
      var heading = 0;
      var pos = [15, 10];
      var leafPos;
      leafPos = [Math.floor(Math.random() * 250), Math.floor(Math.random() * 75)];
      ctx.fillRect(30, 20, width, 10);
      var main = setInterval(function() {
        ctx.fillStyle = 'black';
        ctx.fillRect(0, 0, 2000, 1400);
        ctx.fillStyle = '00ff00';
        if(heading == -90) {
          heading = 270;
        } if(heading == 360) {
          heading = 0;
        } if(heading == 0) {
          pos[0] += speed;
        } if(heading == 180) {
          pos[0] -= speed;
        } if(heading == 0 || heading == 180) {
          ctx.fillRect(pos[0], pos[1], width, 5);
        } if(heading == 270) {
          pos[1] -= speed;
        } if(heading == 90) {
          pos[1] += speed;
        } if(heading == 270 || heading == 90) {
          ctx.fillRect(pos[0], pos[1], 5, width);
        }

        if((Math.abs(leafPos[0] - pos[0]) + Math.abs(leafPos[1] - pos[1])) <= 15) {
          speed  += 0.5;
          width ++;
          leafPos = [Math.floor(Math.random() * 250), Math.floor(Math.random() * 75)];
        }
        ctx.drawImage(img, leafPos[0], leafPos[1]);                 // The line of interest
        document.querySelector('p').innerHTML = (speed - 1) *10;
      }, 50);
    </script>
  </body>
</html>

原始的SVG图像在顶部供参考。

为了解决这个问题，我尝试在主间隔之前放置ctx.scale(0.5, 0.5)，并将所有x、y、宽度和高度值加倍，除了我们感兴趣的那条线。这起作用了，但图像质量受到了相当严重的影响。我还尝试通过缩放其宽度和高度来编辑感兴趣的那行：

ctx.drawImage(img, leafPos[0], leafPos[1], img.width /2, img.height /2)

然而，这产生了相同的结果。

有没有办法禁用图像的自动缩放，以避免这种情况？

或者

有没有办法调整图像大小而不降低图像质量？

任何帮助都将不胜感激。

1个回答
1

不要在样式中设置画布大小：
<canvas style="width:1000px;height:700px;border:3px solid red;"></canvas>

应该像这样设置：
<canvas width=1000 height=700 style="border:3px solid red;"></canvas>

See working sample below 

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var img = document.querySelector('svg');
var xml = new XMLSerializer().serializeToString(img);
img = new Image();
img.src = 'data:image/svg+xml;base64,' + btoa(xml);

function draw() {
  ctx.fillStyle = 'black';
  ctx.fillRect(0, 0, 2000, 1400);
  ctx.fillStyle = '00ff00';
  ctx.drawImage(img, 20, 20);
}

setInterval(draw, 50);
<svg style="width:50px;height:50px;">
<polygon points="10,10 10,14 10.5,17 12,23 14,30 16,34 18,36 22,37 25,37 25,30 24.5,28 24,27 23.5,26 11,10" style="fill:lime;stroke:green;stroke-width:1;" />
<line x1="10" y1="10" x2="25" y2="37" style="stroke:green;stroke-width:1;" />
</svg>

<canvas width=1000 height=700 style="border:3px solid red;"></canvas>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接