Canvas实现放射线动画效果


Posted in Javascript onFebruary 15, 2017

效果如下:

Canvas实现放射线动画效果

代码如下:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 body {background: #000;overflow: hidden;margin: 0;padding: 0;}
 #canv {width: 45%;margin: 5% 30%;animation: wheel-rotate 30s linear infinite;}
 @keyframes wheel-rotate {
 from {
 transform: rotate(0deg);
 }
 to {
 transform: rotate(360deg);
 }
 }
 </style>
 </head>
 <body>
 <canvas id="canv" width="600" height="600"></canvas>
 <script type="text/javascript">
 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 + ')';
 }
 function myrefresh(){
  //window.location.reload();
  //drawLines()
 }
 //setTimeout('myrefresh()',100*175);
 </script>
 </body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
一段好玩的JavaScript代码
Dec 01 Javascript
javascript 不间断的图片滚动并可点击
Jan 15 Javascript
javascript拓展DOM操作 prependChild insertAfert
Nov 17 Javascript
javascript得到当前页的来路即前一页地址的方法
Feb 18 Javascript
javascript中call和apply的用法示例分析
Apr 02 Javascript
javascript封装简单实现方法
Aug 11 Javascript
Centos7 中安装 Node.js v4.4.4
Nov 03 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
Aug 09 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 Javascript
selenium+java中用js来完成日期的修改
Oct 31 Javascript
js回调函数仿360开机
Dec 26 Javascript
js实现查询商品案例
Jul 22 Javascript
微信小程序 开发经验整理
Feb 15 #Javascript
bootstrap table操作技巧分享
Feb 15 #Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
Feb 15 #Javascript
JS原型与原型链的深入理解
Feb 15 #Javascript
js中数组插入、删除元素操作的方法
Feb 15 #Javascript
jQuery中on方法使用注意事项详解
Feb 15 #Javascript
防止重复发送 Ajax 请求
Feb 15 #Javascript
You might like
Function eregi is deprecated (解决方法)
2013/06/21 PHP
php获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
PHP获取HTTP body内容的方法
2018/12/31 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
JavaScript 动态改变图片大小
2009/06/11 Javascript
菜鸟javascript基础资料整理3 正则
2010/12/06 Javascript
jQuery学习笔记之jQuery选择器的使用
2010/12/22 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
2011/07/08 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
初识简单却不失优雅的Vue.js
2016/09/12 Javascript
angularjs封装$http为factory的方法
2017/05/18 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
[03:10]超级美酒第四天 fy拉比克秀 大合集
2018/06/05 DOTA
Python os模块中的isfile()和isdir()函数均返回false问题解决方法
2015/02/04 Python
Python基于递归算法求最小公倍数和最大公约数示例
2018/07/27 Python
python版opencv摄像头人脸实时检测方法
2018/08/03 Python
使用Scrapy爬取动态数据
2018/10/21 Python
python cv2截取不规则区域图片实例
2019/12/21 Python
pytorch 批次遍历数据集打印数据的例子
2019/12/30 Python
基于Python pyecharts实现多种图例代码解析
2020/08/10 Python
Python之字符串的遍历的4种方式
2020/12/08 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
英国户外装备商店:Ultimate Outdoors
2019/05/07 全球购物
美国环保妈妈、儿童和婴儿用品购物网站:The Tot
2019/11/24 全球购物
大学生毕业求职简历的自我评价
2013/10/24 职场文书
专科文秘应届生求职信
2013/11/18 职场文书
职业生涯规划怎么写
2013/12/29 职场文书
幼儿园中班教学反思
2014/02/10 职场文书
《会变的花树叶》教学反思
2014/02/10 职场文书
公司接待方案
2014/03/08 职场文书
绿色城市实施方案
2014/03/19 职场文书
春节联欢会主持词
2014/03/24 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
Redis集群的关闭与重启操作
2021/07/07 Redis
Python 全局空间和局部空间
2022/04/06 Python