在JavaScript画布中禁用图像自动缩放[重复]

- 此问题在此处已有答案**：

Canvas is stretched when using CSS but normal with "width" / "height" properties（10个答案）
20小时前关门了。
我已经做了一个基本的蛇游戏，我试图改善一个小细节。
你看，当我放置苹果图像[或树叶图像，因为我有一个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)
然而，这产生了相同的结果。
有没有什么方法可以禁用图像的自动缩放来完全避免这种情况？
或
有没有什么方法可以在不降低图像质量的情况下调整图像大小？
任何帮助都很感激。

不要在样式上设置画布大小：
第一个月
您应该这样设置它：
<canvas width=1000 height=700 style="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);

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>

在JavaScript画布中禁用图像自动缩放[重复]

1条答案

相关问题

热门标签

最新问答