冒泡动画

最新推荐文章于 2021-05-25 22:33:27 发布

Journey_Sh

最新推荐文章于 2021-05-25 22:33:27 发布

阅读量407

点赞数

分类专栏： Javascript cavas 文章标签： cavas 冒泡 HTML5

本文链接：https://blog.csdn.net/u011563656/article/details/62043864

版权

Javascript cavas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>圆形自上向下运动效果</title>
</head>
<body>
<canvas id="canvas" width="300px" height="400px"></canvas>
<script>
var canvas=document.getElementById("canvas");
var context=canvas.getContext('2d');
var y=10;
var x=Math.random()*canvas.width;

var img=new Image();
img.src="bg.jpg";

setInterval(function(){
y++;

context.drawImage(img,0,0);
if(y<canvas.height){
context.beginPath();
context.arc(x,y,10,0,Math.PI*2);
context.fill();
}
},10);

</script>
</body>
</html>