html多张图片合成,利用Html5 cavans 多张图片绘制合成图片

您的浏览器不支持 HTML5 canvas 标签。

var img=document.getElementById("bg");

var ewm=document.getElementById("ewm");

//判断多图加载完成

var imgarr = [],

flag = 0,

mulitImg=[

img.src,

ewm.src,

]

var imgTotal = mulitImg.length;

for(var i = 0 ; i < imgTotal ; i++){

imgarr[i] = new Image();

imgarr[i].src = mulitImg[i];

imgarr[i].onload = function(){

//第i张图片加载完成

flag++

if( flag == imgTotal ){

//全部加载完成

var c = $('#myCanvas')[0];

var ctx = c.getContext('2d');

ctx.drawImage(img,0,0,640,1008);

ctx.drawImage(ewm,65,260,500,500);

src=c.toDataURL("image/png");

$("#showimg").attr("src",src);

}

}

}