canvas轮播与Jquery动画轮播

野猪麦兜

已于 2022-03-11 15:19:31 修改

阅读量1k

点赞数

分类专栏：其他文章标签： jquery 动画 javascript

于 2022-03-11 11:48:56 首次发布

本文链接：https://blog.csdn.net/qq_58242432/article/details/123356895

版权

canvas轮播

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>canvas轮播</title>
		<style type="text/css">
			canvas{
				display: block;
				margin: 50px auto;
				border: solid 1px black;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var canvas = document.querySelector("canvas");
				canvas.width=500;
				canvas.height=500;
				var ctx = canvas.getContext("2d");
				var i=-100;
				var n = 1;
				setInterval(function(){
					canvas.width=500;
					canvas.height=500;
					if(i==600){
						n=1;
						i=-100;
					}else{
					i+=n;
					}
					ctx.arc(i,100,100,0,2*Math.PI,false);
					ctx.fill();
				},10)
			}
		</script>
	</head>
	<body>
		<canvas></canvas>