您的位置：首页 > 编程语言

Canvas合成图像比较简单看代码和demo

2015-07-09 16:58 429 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
*{
margin:0;
padding:0;
}
.center{
text-align: center;
}

</style>
</head>
<body>
<div class="center">
<img src="1.jpg" alt="" />
<img src="2.png" alt="" />
</div>
<button onclick="date()">生成</button>
<div id="imgBox" style="width:1000px;height:800px;">
</div>
</body>
<script>
var data=["1.jpg","2.png"],base64=[];
function date(){
var Mycanvas=document.createElement("canvas"),
ct=Mycanvas.getContext("2d"),
len=data.length;
Mycanvas.width=640;
Mycanvas.height=386;
ct.rect(0,0,Mycanvas.width,Mycanvas.height);
ct.fillStyle='#fff';
ct.fill();
function draw(n){
if(n<len){
var img=new Image;
img.crossOrigin = 'Anonymous'; //解决跨域
img.src=data
;
console.log(data
);
img.onload=function(){
ct.drawImage(this,0,0,640,386);
draw(n+1);
}
}else{
base64.push(Mycanvas.toDataURL("image/png"));
document.getElementById("imgBox").innerHTML='<img src="'+base64[0]+'">';
}
}
draw(0)

}

</script>
</html>

demo：http://sandbox.runjs.cn/show/kozthrpo

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

Canvas合成图像 比较简单 看代码和demo

Canvas合成图像比较简单看代码和demo