这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要分享了 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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0723/327642.html