在 html5 中询问 canvas

Question

我有 1 个 canvas，宽度为 300 像素，高度为 600 像素。我想用下面的代码绘制原始尺寸（60px，90px）的Image 1图像，但结果显示图像尺寸宽度= 60x和高度= 360px。请帮我修好。谢谢！

var c = document.getElementById("myCanvas");
    ctx = c.getContext('2d');
    var img = new Image();
    img.src = './img/t2.png';
    img.onload = () => {
        ctx.drawImage(img, 0, 0, 60, 90)
    };

Answer 1

首先，canvas有2个不同的size（尺寸），style size和internal size。样式大小用于页面显示，内部用于计算绘图元素坐标。我没有看到您设置任何尺寸，我假设您只在 CSS 中设置样式尺寸。这意味着，内部尺寸默认为 300x150

下面是仅通过 CSS 设置 300x600 时的一个小演示：

var c = document.getElementById("myCanvas");
    ctx = c.getContext('2d');
    var img = new Image();
    img.src = 'https://lh3.googleusercontent.com/9pPCK70Rw0k3wethMHb1qMaIB0VjeWLy57vYgSzKbF7oJuvO2nA0Nakk-95cvibWUDcEhYkfCKvdPKT03tXZd4M5jdhIEibLO9qw-XE=w1024-h683-n-l50-sg-rj';
    img.onload = () => {
        ctx.drawImage(img, 0, 0, 60, 90)
    };

canvas
{
  width: 300px;
  height: 600px;
}

<canvas id="myCanvas"></canvas>

内部尺寸合适的情况也是如此：

var c = document.getElementById("myCanvas");
    c.width = 300;
    c.height = 600;
    ctx = c.getContext('2d');
    var img = new Image();
    img.src = 'https://lh3.googleusercontent.com/9pPCK70Rw0k3wethMHb1qMaIB0VjeWLy57vYgSzKbF7oJuvO2nA0Nakk-95cvibWUDcEhYkfCKvdPKT03tXZd4M5jdhIEibLO9qw-XE=w1024-h683-n-l50-sg-rj';
    img.onload = () => {
        ctx.drawImage(img, 0, 0, 60, 90)
    };

canvas
{
  width: 300px;
  height: 600px;
}

<canvas id="myCanvas"></canvas>

在 html5 中询问 canvas

ask about canvas in html5

javascript

html5-canvas