为什么 Canvas 在同一 html 文档中的两个不同的 canvas 元素上以不同的方式绘制具有相同宽度和长度的相同图像？

Question

我遇到以下情况：

在上面的屏幕截图中，带有 pickachu 图片的两个方块被实现为两个不同的 canvas 标签。此外，我在从 typescript smth 中绘制这些图像时使用相同的缩放比例，如下所示：

ctx1.drawImage(pickachu1,0,0,300,150);
ctx3.drawImage(pickachu3,0,0,300,150);

但是两张图片的实际比例差别很大... 我有以下问题：

为什么会这样？显然第一个命令中的 300 像素不完全是像素，与第二个命令中的 300 像素不对应。
如何在不改变 html 中的 canvas 大小的情况下使以上两个命令的结果相同？ IE。这样两个命令中的 300 和 150 意思相同吗？我仍然需要第 3 个 canvas 的大小为 index.html 中声明的 1500x1500 像素（请参阅下面的代码），因为我必须在其上绘制更多图像，例如在网格上。
html 文件中的第一个 canvas 被声明为近似正方形，但图像的实际宽度和高度必须为 300 和 150 才能使其完全适合第一canvas，这是为什么？
在index.html中，第三个canvas的大小设置为1500x1500像素，我天真地期望我能够绘制一个30x30的网格NON- OVERLAPPING 宽度和长度为 50px 的图像通过制作双循环 smth 像：

for (let i=0; i<30; i+=1){
       for (let j=0; j<30; j+=1){
          ctx3.drameImage(image, 50*i, 50*j, 50, 50);
       }
}

但是显然给出我观察到的上述双循环的行为是行不通的。我怎么能让这个工作？提前致谢！

代码如下： index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Typescript App</title>
  </head>
  <body>
    <div id="main" class="main">
      <div id="deckRow">
          <canvas id="deckCover"> </canvas>
          <canvas id="drawnTile"> </canvas>
          <button id="drawNewTile">Click me</button>
          <button id="rotateTile">Click me too</button>
      </div>

      <div id="playingBoardRow">
        <canvas id="playingBoard"> </canvas>
      </div>

    </div>
    <script src="./index.ts"></script>
  </body>
  <style>
    :root {
      --width: 1900px;
      --hight: 1700px;
      --drawn_card_width: 100px;
      --drawn_card_height: var(--drawn_card_width); 
    }

    #main {
      position: static;
      width: var(--width);
      margin: 0 auto;
      width: var(--width);
      height: var(--height);
      font-size: 32px;
      font-family: Arial, Helvetica, sans-serif;
      outline: black solid;
    }

    #deckRow {
      position: static;
      width: 300px;
      height: 100px;
      background-color: goldenrod;
    }
   
    #deckCover{
      position: relative;
      float: left;
      width: 32%;
      height: 98%;
      margin: 1%;
      outline: black solid;
    }

    #drawnTile{
      position: relative;
      float: left;
      width: 32%;
      height: 98%;
      margin: 1%;
      outline: black solid;
    }

    #drawNewTile{
      font-size: auto;
    }

    #rotateTile{
      font-size: auto;
    }

    #tilPlacementRow{
      position: static;
      font-size: 12px;
      top: 1000px;
    }

    #playingBoardRow{
      position: static;
      margin-top: 10px;
      width: 1500px;
      height: 1500px;
    }

    #playingBoard{
      position: relative;
      width: 1500px;
      height: 1500px;
      outline: red solid;
    }
  </style>
</html>

index.ts:

import TILE_COVER_IMG from './images/pickachu.png';
let canvas1 = document.querySelector('#deckCover') as HTMLCanvasElement;
let ctx1 = canvas1.getContext('2d')!;

let background1 = new Image();
background1.src = TILE_COVER_IMG;
console.log(canvas1.width, canvas1.height);
background1.onload = () => {
    ctx1.drawImage(background1,0,0,300,150);   
}

// set background on 2nd canvas
let canvas2 = document.querySelector('#drawnTile') as HTMLCanvasElement;
let ctx2 = canvas2.getContext('2d')!;

ctx2.fillStyle = 'rgba(229, 228, 226)';
ctx2.fillRect(0, 0,canvas2.width,canvas2.height);
ctx2.font = '36px cursive';
ctx2.textAlign = 'left';
ctx2.textBaseline = 'middle';
ctx2.fillStyle = "#000000"
ctx2.fillText('Another', 50, 50);
ctx2.fillText('Canvas', 50, 85);

// set background on 3nd canvas, i.e. on playing board
import EMPTY_TILE_PNG from './images/pickachu.png';
let canvas3 = document.querySelector('#playingBoard') as HTMLCanvasElement;
let ctx3 = canvas3.getContext('2d')!;

let empty_img = new Image();
empty_img.src = EMPTY_TILE_PNG;
empty_img.onload = () => {
    ctx3.drawImage(empty_img,0,0,300,150);
};

Answer 1

您需要通过 height and width 属性设置 canvas 大小。使用 css 样式宽度或高度缩放 canvas 会导致您看到缩放渲染问题。

这是使用 css 缩放的 canvas 的示例，导致绘制结果不合适：

var c = document.getElementById("myCanvas");
c.style.width = "500px";
//c.width = 500;
var ctx = c.getContext("2d");
var img = document.getElementById("icon");
  ctx.drawImage(img, 10, 10, 200, 200);

<img id="icon" src="data:image/png;base64,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" />
<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

这里是通过设置 canvas.width 和 canvas.height 属性所期望的行为

var c = document.getElementById("myCanvas");
c.width = 500;
var ctx = c.getContext("2d");
var img = document.getElementById("icon");
  ctx.drawImage(img, 10, 10, 200, 200);

<img id="icon" src="data:image/png;base64,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" />
<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

为什么 Canvas 在同一 html 文档中的两个不同的 canvas 元素上以不同的方式绘制具有相同宽度和长度的相同图像？

Why Canvas draws the same image with the same width and length differently on two separate canvas elements in the same html document?

css

html5-canvas

typescript