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实现打开本地文件或文件夹
Mar 09 Javascript
jquery CSS选择器笔记
Mar 29 Javascript
遍历jquery对象的代码分享
Nov 02 Javascript
jquery的父子兄弟节点查找示例代码
Mar 03 Javascript
封装好的javascript前端分页插件pagination
Jan 04 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 Javascript
javascript中利用柯里化函数实现bind方法
Apr 29 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
Nov 28 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
Dec 07 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
JavaScript RegExp 对象用法详解
Sep 24 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 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 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
一个PHP分页类的代码
2011/05/18 PHP
php中数组首字符过滤功能代码
2012/07/31 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
AngularJS中实现动画效果的方法
2016/07/28 Javascript
微信小程序 Audio API详解及实例代码
2016/09/30 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
使用jquery实现的循环连续可停顿滚动实例
2016/11/23 Javascript
浅谈html转义及防止javascript注入攻击的方法
2016/12/04 Javascript
webpack+react+antd脚手架优化的方法
2018/04/02 Javascript
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
vue slot与传参实例代码讲解
2019/04/28 Javascript
[44:40]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
python中字典dict常用操作方法实例总结
2015/04/04 Python
Python中的rjust()方法使用详解
2015/05/19 Python
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
Python 实现 贪吃蛇大作战 代码分享
2016/09/07 Python
python如何使用unittest测试接口
2018/04/04 Python
对Python中9种生成新对象的方法总结
2018/05/23 Python
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
pycharm 的Structure界面设置操作
2021/02/05 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
Top Villas美国:豪华别墅出租和度假屋
2018/07/10 全球购物
希腊香水和化妆品购物网站:Parfimo.gr
2019/10/03 全球购物
财务部出纳岗位职责
2013/12/22 职场文书
另类冲刺标语
2014/06/24 职场文书
志愿者活动总结报告
2014/06/27 职场文书
做人民满意的公务员活动方案
2014/08/25 职场文书
培训简讯范文
2015/07/20 职场文书
三好学生竞选稿范文
2019/08/21 职场文书