canvas 将两张图片叠加

2025-07-11 10:40:01 世界杯瑞典 9977

创建一个 canvas 元素

获取 canvas 元素

getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

const canvas = document.querySelector('#canvas')

const ctx = canvas.getContext('2d')通过 new Image() 创建一个图像元素

var myImg = new Image();

myImg.src = './images/code.png';

var bgImg = new Image();

bgImg.src = './images/bg.png';在图像加载成功后进行绘画

bgImg.onload = function () {

// this.width 和 this.height 获取到的是当前图片的宽和高

document.getElementById("canvas").width = this.width;

document.getElementById("canvas").height = this.height;

ctx.drawImage(bgImg, 0, 0, this.width, this.height)

ctx.drawImage(myImg, this.width - 500, 300, 200, 200)

}通过 canvas.toDataURL("image/png") 方法将 canvas 画完的图片转为 base64 文件格式获取图片

canvas.toDataURL("image/png")