前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Canvas线条动画

Canvas线条动画

作者头像
我不是费圆
发布2020-09-21 16:50:26
1.6K0
发布2020-09-21 16:50:26
举报
文章被收录于专栏:鲸鱼动画鲸鱼动画

Canvas线条动画

 简单的Canvas动画,代码只有71行,试试吧!没有谁天生就会,用这个动画,做为你的Canvas小结。  如果你觉得我的代码还算有趣,在你的学习中能有所帮助,请查看我的置顶文章,我由衷感谢!

在这里插入图片描述
在这里插入图片描述
代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script src="jquery.js"></script>
	<title>Document</title>
	<style>
		body{
			background:#000;
			overflow:hidden;
			margin:0;
		}
		canvas{
			width:45%;
			margin:5% 30%;
		}
	</style>
</head>
<body>
	<canvas id="canv" width="600" height="600"></canvas>
</body>
<script>
	var c;
	var $;
	var w = 600;
	var h = 600;
	constant = 15;
	var rad = 300;
	var timeout = 0;
	c= document.getElementById("canv");
	$= c.getContext('2d');
	drawLines();
	function drawLines(){
		$.fillRect(0,0,w,h);
		$.translate(w/2,h/2);
		for (var i = 0; i < 25; i++) {
			for (var n = -45; n <= 45; n+=constant) {
				setTimeout("draw("+n+");",100 * timeout);
				timeout++;
			}
		}
	}
function draw(n){
	$.beginPath();
	$.moveTo(0,rad);
	var radians = Math.PI/180*n;
	var x = (rad * Math.sin(radians)) / Math.sin(Math.PI/2 - radians);
	$.lineTo(x,0);

	if (Math.abs(n) == 45) {
		$.strokeStyle=rndColor();
		$.lineWidth=2;
	} else if (n == 0) {
		$.strokeStyle="rgb(200,200,200)";
		$.lineWidth=.5;
	} else {
		$.strokeStyle="rgb(110,110,110)";
		$.lineWidth=.5;
	}
	$.stroke();
	$.rotate((Math.PI/180)*15);
}

function rndColor() {
    var r = 255*Math.random()|0,
        g = 255*Math.random()|0,
        b = 255*Math.random()|0;
    return 'rgb(' + r + ',' + g + ',' + b + ')';
}
</script>
</html>

  如果你对代码有任何疑问,请在下方?留言,或私信博主,能在前端学习中与你一同进步,是我发表博文的意义。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-09-03 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Canvas线条动画
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档