老师这里如何复制到第一块canva上
来源：9-3 完成案例动画部分
Golden几何
2021-09-21 22:53:52
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
canvas{
background: #000;
}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<canvas id="offCanvas"></canvas>
<script>
var canvas=document.getElementById('myCanvas');
var canvas2=document.getElementById('offCanvas');
var ctx=canvas.getContext('2d');
var ctx2=canvas2.getContext('2d');
ctx.canvas.width=600;
ctx.canvas.height=100;
ctx2.canvas.width=600;
ctx2.canvas.height=100;
var circles=[];
setInterval(function(){
ctx2.clearRect(0,0,ctx2.canvas.width,ctx2.canvas.height);
ctx.drawImage(canvas2,0,0,ctx2.canvas.width,ctx2.canvas.height,0,0,ctx.canvas.width,ctx.canvas.height);
for(var i=0;i<10;i++){
if(!circles[i]){
circles[i]={};
circles[i].radius=Math.floor(Math.random()*5)+1;
circles[i].x=i*60+Math.floor(Math.random()*10)-5;
circles[i].y=-circles[i].radius-Math.floor(Math.random()*10);
circles[i].vy=Math.floor(Math.random()*5)+1;
}
ctx2.beginPath();
ctx2.fillStyle='rgba(255,255,255,0.5)';
ctx2.arc(circles[i].x,circles[i].y,circles[i].radius,0,2*Math.PI,true);
ctx2.fill()
circles[i].y+=circles[i].vy;
if(circles[i].y>circles[i].radius+ctx2.canvas.height){
circles[i]=undefined;
}
}
},100);
</script>
</body>
</html>
1回答
-
同学你好，第二个canvas绘制完后再离屏，否则就是黑色的，没有圆圈。如下：
记得也清除第一个canvas，否则在定时器中离屏会叠加，效果不对。
自己再测试下，祝学习愉快！
0h021-09-22
相似问题
回答 2
回答 2