You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
63 lines
1.9 KiB
HTML
63 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>实验02.使用画布合成多张图片</title>
|
|
</head>
|
|
<body>
|
|
<canvas></canvas>
|
|
<canvas></canvas>
|
|
<canvas></canvas>
|
|
<button>保存画布图片</button>
|
|
<style>
|
|
canvas {
|
|
border: 3px solid #FFF;
|
|
border-radius: 2px;
|
|
box-shadow: 0 0 2px #666;
|
|
width: 400px;
|
|
height: 400px;
|
|
}
|
|
</style>
|
|
<script type="module">
|
|
let cs = document.querySelectorAll("canvas");
|
|
for(let c of cs){
|
|
c.width=2000;
|
|
c.height=2000;
|
|
}
|
|
console.debug(cs);
|
|
let c0 = cs[0].getContext("2d");
|
|
let c1 = cs[1].getContext("2d");
|
|
let c2 = cs[2].getContext("2d");
|
|
console.debug(c1);
|
|
let loadImage = function(src){
|
|
return new Promise((resolve,reject)=>{
|
|
let img = new Image();
|
|
img.onload=()=>{
|
|
resolve(img);
|
|
};
|
|
img.onerror=reject;
|
|
img.style.display="none";
|
|
img.src=src;
|
|
document.body.appendChild(img);
|
|
});
|
|
}
|
|
loadImage("imgs/01.png").then((img)=>{
|
|
c0.drawImage(img,0,0,2000,2000);
|
|
c2.drawImage(img,0,0,2000,2000);
|
|
return loadImage("imgs/02.png");
|
|
}).then((img)=>{
|
|
c1.drawImage(img,0,0,2000,2000);
|
|
c2.drawImage(img,0,0,2000,2000);
|
|
});
|
|
document.querySelector("button").onclick=()=>{
|
|
let a = document.createElement("a");
|
|
a.href = cs[2].toDataURL("image/png");
|
|
a.download="大头贴-"+new Date().getTime()+".png";
|
|
a.click();
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html> |