drawImage方法是Canvas API中用于繪制圖片的方法。要實現圖片合成,可以通過drawImage方法將多個圖片繪制到同一個Canvas中,從而實現圖片合成效果。
以下是一個簡單的示例,演示如何使用drawImage方法實現圖片合成:
// 獲取Canvas元素
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 創建Image對象
var image1 = new Image();
var image2 = new Image();
// 加載圖片
image1.src = 'image1.jpg';
image2.src = 'image2.jpg';
// 等待圖片加載完成
image1.onload = function() {
// 繪制第一張圖片
ctx.drawImage(image1, 0, 0);
// 等待第一張圖片繪制完成后再繪制第二張圖片
image2.onload = function() {
// 繪制第二張圖片
ctx.drawImage(image2, 100, 100);
}
}
在上面的示例中,首先獲取Canvas元素和其上下文對象ctx,然后創建兩個Image對象image1和image2,并分別加載兩張圖片。當第一張圖片加載完成后,使用drawImage方法將其繪制到Canvas中的位置(0, 0)。等待第一張圖片繪制完成后,第二張圖片加載完成,并將其繪制到Canvas中的位置(100, 100)。
通過不斷繪制多個圖片,并設置不同的位置和透明度,可以實現復雜的圖片合成效果。