html5之canvas动画

最新推荐文章于 2023-04-20 16:47:35 发布

全力付出

最新推荐文章于 2023-04-20 16:47:35 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： html5

本文链接：https://blog.youkuaiyun.com/zhengyong15984285623/article/details/8779037

html5 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个使用HTML5 Canvas和jQuery实现的简单动画示例。动画中一个红色圆形沿Y轴上下移动，通过设置定时器实现连续动画效果，并可通过按钮控制动画的启动与暂停。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<DOCTYPE html>
<html>
<head>
<title>canvas简单动画</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
var index = 20;
var x = 1;
$(function(){
	start();
	var stop = setInterval("start()",5);
	$('#stop').click(function(){
	 clearInterval(stop);
	});
   $('#start').click(function(){
	  stop = setInterval("start()",5);
	});
});
var start = function (){

   var canvas = $('#myCanvas')[0];
   var myCanvas=canvas.getContext("2d");
   myCanvas.clearRect(0,0,500,500); //在给定的矩形内清除指定的像素
   myCanvas.fillStyle="#FF0000";  //设置或返回用于填充绘画的颜色、渐变或模式
   myCanvas.beginPath();  //起始一条路径，或重置当前路径
   myCanvas.arc(200,index,20,0,Math.PI*2,1); //x坐标，y坐标，半径，从哪开始画，Math.PI是圆周率，顺时针
   myCanvas.closePath(); //创建从当前点回到起始点的路径
   myCanvas.fill();      //填充当前绘图（路径
   index = index+x;      //起点+活动像素位置
   if(index==20 || index == 280){  //判断当前线的位置，控制在区域内
     x = x*-1;           //乘以负一用来调整线路方向
   }
} 
</script>
<head>
<canvas id="myCanvas" width="500" height="300"></canvas>
<br>
<button id="start">开始</button>
<button id="stop">停止</button>
</html>