本文展示了一个HTML5 Canvas的示例，该示例使用了三个不同的canvas标签来实现特定的功能。通过这个demo，读者可以了解到如何在网页中有效地利用多个canvas元素进行图形绘制和交互。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>插入图片</title>
<style type="text/css">
#wrap{
border:2px dashed red;
background-color:green;
}
#wrap2{
background-color: #ddd;
position: absolute;
left: 30px;
top: 40px;
/*display: none;*/
z-index:3;
}
#wrap3{
background-color: #ffdd00;
position: absolute;
left: 40px;
top: 60px;
/*display: none;*/
z-index:4;
}
</style>
</head>
<body>
<canvas width="500" height="700" id="wrap"></canvas>
<canvas width="300" height="300" id="wrap2"></canvas>
<canvas width="300" height="300" id="wrap3"></canvas>
<script type="text/javascript">
var wrap =document.getElementById('wrap');
var ctx =wrap.getContext('2d');
var wrap2 =document.getElementById('wrap2');
var ctx2 =wrap2.getContext('2d');
var wrap3 =document.getElementById('wrap3');
var ctx3 =wrap3.getContext('2d');
var img =new Image();
img.src="hua.jpg";
if(img.complete){
alert(img.complete);
ctx.drawImage(img,0,0);
ctx.strokeRect(400,500,20,20);
}else{
//alert("else"); 已验证canvas渲染是从这里开始的
img.οnlοad=function(){
ctx.drawImage(img,0,0);
ctx.fillRect(0,0,200,200);
ctx.fillStyle="red";
ctx.fillRect(100,20,200,200);
ctx2.drawImage(img,0,0);
ctx3.fillStyle="#ff00ee";
ctx3.fillRect(100,20,300,200);
};
img.οnerrοr=function(){
alert("加载失败,请重试");
};
}
//img.src="hua.jpg";
</script>
</body>
<html>
<head>
<meta charset="utf-8">
<title>插入图片</title>
<style type="text/css">
#wrap{
border:2px dashed red;
background-color:green;
}
#wrap2{
background-color: #ddd;
position: absolute;
left: 30px;
top: 40px;
/*display: none;*/
z-index:3;
}
#wrap3{
background-color: #ffdd00;
position: absolute;
left: 40px;
top: 60px;
/*display: none;*/
z-index:4;
}
</style>
</head>
<body>
<canvas width="500" height="700" id="wrap"></canvas>
<canvas width="300" height="300" id="wrap2"></canvas>
<canvas width="300" height="300" id="wrap3"></canvas>
<script type="text/javascript">
var wrap =document.getElementById('wrap');
var ctx =wrap.getContext('2d');
var wrap2 =document.getElementById('wrap2');
var ctx2 =wrap2.getContext('2d');
var wrap3 =document.getElementById('wrap3');
var ctx3 =wrap3.getContext('2d');
var img =new Image();
img.src="hua.jpg";
if(img.complete){
alert(img.complete);
ctx.drawImage(img,0,0);
ctx.strokeRect(400,500,20,20);
}else{
//alert("else"); 已验证canvas渲染是从这里开始的
img.οnlοad=function(){
ctx.drawImage(img,0,0);
ctx.fillRect(0,0,200,200);
ctx.fillStyle="red";
ctx.fillRect(100,20,200,200);
ctx2.drawImage(img,0,0);
ctx3.fillStyle="#ff00ee";
ctx3.fillRect(100,20,300,200);
};
img.οnerrοr=function(){
alert("加载失败,请重试");
};
}
//img.src="hua.jpg";
</script>
</body>
</html>
--------------------
效果图
用到的img
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
