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 相关文章推荐
一些不错的js函数ajax
Aug 20 Javascript
jquery 页面全选框实践代码
Apr 02 Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
Apr 23 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
Aug 16 Javascript
JQuery通过Ajax提交表单并返回结果
Jul 31 Javascript
javascript事件冒泡实例分析
May 13 Javascript
JavaScript省市级联下拉菜单实例
Feb 14 Javascript
JS对象深度克隆实例分析
Mar 16 Javascript
vue购物车插件编写代码
Nov 27 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
js滚轮事件 js自定义滚动条的实现
Jan 18 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
Jun 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
PHP生成带有雪花背景的验证码
2006/10/09 PHP
PHP CKEditor 上传图片实现代码
2009/11/06 PHP
用php实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
浅谈php提交form表单
2015/07/01 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
仿新浪微博登陆邮箱提示效果的js代码
2013/08/02 Javascript
获取3个数组不重复的值的具体实现
2013/12/30 Javascript
c#程序员对TypeScript的认识过程
2015/06/19 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
详解VUE中v-bind的基本用法
2017/07/13 Javascript
强大的JavaScript响应式图表Chartist.js的使用
2017/09/13 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
谈谈JS中的!!
2017/12/07 Javascript
vue-cli3全面配置详解
2018/11/14 Javascript
javascript实现固定侧边栏
2021/02/09 Javascript
[02:06]DOTA2英雄基础教程 暗影萨满
2013/12/16 DOTA
Python实现堆排序的方法详解
2016/05/03 Python
详解Python中类的定义与使用
2017/04/11 Python
Golang GBK转UTF-8的例子
2019/08/26 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
python+excel接口自动化获取token并作为请求参数进行传参操作
2020/11/10 Python
CSS3的column-fill属性对齐列内容高度的用法详解
2016/07/01 HTML / CSS
全球知名的珠宝首饰品牌:Kay Jewelers
2018/02/11 全球购物
如何保障Web服务器安全
2014/05/05 面试题
Java中的异常处理机制的简单原理和应用
2013/04/27 面试题
学生学习总结的自我评价
2013/10/22 职场文书
优秀求职自荐信怎样写
2013/12/18 职场文书
大学生职业规划论文
2014/01/11 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
2015年元旦主持词开场白
2014/12/14 职场文书
感恩教育观后感
2015/06/17 职场文书
同学联谊会邀请函
2019/06/24 职场文书
处世之道:关于真诚相待的名言推荐
2019/12/02 职场文书
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android