Canvas线条动画

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

<!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>

如果你对代码有任何疑问，请在下方

Canvas线条动画相关推荐

canvas线条动画js特效代码
下载地址canvas线条动画特效代码 dd:
canvas画圆和线条动画
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8 ...
Canvas炫酷3D线条动画背景
下载地址 Canvas炫酷3D线条动画背景,可以变色的颜色渐变网页动态背景特效. dd:
php 3d animation,基于three.js的酷炫Canvas 3D线条动画特效
[温馨提示]源码包解压密码:www.youhutong.com 效果图: 描述说明: html5-canvas-animation是一款基于three.js的HTML5 canvas 3D线条动画特效 ...
html5 canvas全屏变色波浪线条动画js特效
下载地址基于html5 canvas+js制作的全屏变色波浪线条动画特效,线条发光背景颜色变换效果. dd:
Canvas线条花环
可喜可贺!庆祝电脑起死回生,庆祝一天好过一天.深夜给电脑安装了开发插件,第二天莫名死机,问了好多人都说主板坏掉了,需要重装系统.我先是对着宾夕法尼亚大学的方向拜了拜,又是一番操作,终于唤醒了老 ...
android 动态生成直线,Android SVG技术入门：线条动画实现原理
SVG技术入门:线条动画实现原理这是一个有点神奇的技术:一副线条构成的画能自动画出自己,非常的酷.SVG 意为可缩放矢量图形(Scalable Vector Graphics),是使用 XML 来描 ...
如何使用Canvas及动画实现
如何使用Canvas及其动画实现什么是Canvas? Canvas API(画布)是在HTML5中新增的标签用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作 ...
css3宽度变大动画_SVG线条动画
什么是线条动画通常来说,对于web前端来实现动画效果,不外乎通过下面几种方案: CSS动画:利用css3的样式效果可以将dom元素做出动画的效果来. Canvas动画:利用Canvas提供的API, ...
canvas粒子动画
2019独角兽企业重金招聘Python工程师标准>>> 周末在家玩了一下canvas粒子动画,先看看效果,用的图是我们微众银行的干爹'qq',先看看效果 ##1.获取图片信息 ### ...

Canvas线条动画

Canvas线条动画

Canvas线条动画相关推荐

最新文章

热门文章