drawImage鏂规硶鏄疌anvas API涓敤浜庣粯鍒跺浘鐗囩殑鏂规硶銆傝瀹炵幇鍥剧墖鍚堟垚锛屽彲浠ラ€氳繃drawImage鏂规硶灏嗗涓浘鐗囩粯鍒跺埌鍚屼竴涓狢anvas涓紝浠庤€屽疄鐜板浘鐗囧悎鎴愭晥鏋溿€?/p>

浠ヤ笅鏄竴涓畝鍗曠殑绀轰緥锛屾紨绀哄浣曚娇鐢╠rawImage鏂规硶瀹炵幇鍥剧墖鍚堟垚锛?/p>

// 鑾峰彇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() {
  // 缁樺埗绗竴寮犲浘鐗?/span>
  ctx.drawImage(image1, 0, 0);
  
  // 绛夊緟绗竴寮犲浘鐗囩粯鍒跺畬鎴愬悗鍐嶇粯鍒剁浜屽紶鍥剧墖
  image2.onload = function() {
    // 缁樺埗绗簩寮犲浘鐗?/span>
    ctx.drawImage(image2, 100, 100);
  }
}

鍦ㄤ笂闈㈢殑绀轰緥涓紝棣栧厛鑾峰彇Canvas鍏冪礌鍜屽叾涓婁笅鏂囧璞tx锛岀劧鍚庡垱寤轰袱涓狪mage瀵硅薄image1鍜宨mage2锛屽苟鍒嗗埆鍔犺浇涓ゅ紶鍥剧墖銆傚綋绗竴寮犲浘鐗囧姞杞藉畬鎴愬悗锛屼娇鐢╠rawImage鏂规硶灏嗗叾缁樺埗鍒癈anvas涓殑浣嶇疆(0, 0)銆傜瓑寰呯涓€寮犲浘鐗囩粯鍒跺畬鎴愬悗锛岀浜屽紶鍥剧墖鍔犺浇瀹屾垚锛屽苟灏嗗叾缁樺埗鍒癈anvas涓殑浣嶇疆(100, 100)銆?/p>

閫氳繃涓嶆柇缁樺埗澶氫釜鍥剧墖锛屽苟璁剧疆涓嶅悓鐨勪綅缃拰閫忔槑搴︼紝鍙互瀹炵幇澶嶆潅鐨勫浘鐗囧悎鎴愭晥鏋溿€?/p>