Canvas实现放射线动画效果
网络编程 2021-07-04 19:20www.168986.cn编程入门
本文主要分享了Canvas实现放射线动画的示例代码。具有很好的参考价值,狼蚁网站SEO优化跟着长沙网络推广一起来看下吧
效果如下:
代码如下:
<!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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持狼蚁SEO!
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程