在已有图像作为背景的 HTML canvas 上叠加图像

Question

我创建了一个带有彩色背景的 canvas 元素，我想出了下面的代码来在这个 canvas 之上插入一个图像：

    const canvas = document.getElementById(id);
    console.log(canvas);
    if (canvas.getContext) {
        var context = canvas.getContext('2d');
        var img = new Image();
        img.src = 'https://google.com/xyz.jpg';
        img.onload = function () {
            context.save();
            context.rect(10, 2, 10, 10);
            context.clip();
            context.drawImage(img, 0, 0); // image won't resize 
            context.restore();
        };
    }

现在这成功地将图像叠加在 canvas 之上（但是它被截断了），但我找不到将图像调整为特定大小（例如 10x10）的方法.我尝试将代码中的倒数第二行更改为 context.drawImage(img, 0, 0, 10, 10);，但这破坏了我的代码，此时图像不会显示在 canvas 上。任何帮助将不胜感激！

Answer 1

加载并绘制图像。

const ctx = can.getContext('2d');
const img = new Image;        
img.src = 'https://pbs.twimg.com/media/DyhGubJX0AYjCkn.jpg';
img.addEventListener("load", () => {
    // draw image at 10, 10, width and height 50,50
    ctx.drawImage(img, 10, 10, 50, 50);  // resizes image
}, {once: true});

canvas {
   background: green;
}

<canvas id="can" width="200" height = "200"></canvas>

在已有图像作为背景的 HTML canvas 上叠加图像

Layering an image on top of an HTML canvas that already has an image as its background

javascript

html5-canvas