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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • JS Canvas定时器模拟动态加载动画

    本文实例为大家分享了Canvas定时器动态加载动画,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> </style> </head> <body> <canvas id="canva

  • JS基于HTML5的canvas标签实现炫目的色相球动画效果实例

    JS基于HTML5的canvas标签实现炫目的色相球动画效果实例

    本文实例讲述了JS基于HTML5的canvas标签实现色相球效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>JS canvas标签制作色相球</title> </head> <body> <canvas></canvas&g

  • Canvas 绘制粒子动画背景

    Canvas 绘制粒子动画背景

    效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> *{ margin:0px; padding:0px; } body{ background:#000; } canvas{ position:abs

  • Android开发之图形图像与动画(一)Paint和Canvas类学习

    Android开发之图形图像与动画(一)Paint和Canvas类学习

    Paint类 *Paint类代表画笔,用来描述图形的颜色和风格,如线宽,颜色,透明度和填充效果等信息. *使用Paint类时,需要先创建该类的对象,可以通过该类的构造函数实现.通常情况的实现代码是: *Paintpaint=newPaint(); *创建完Paint对象后,可以通过该对象提供的方法对画笔的默认设置进行改变 Canvas *Canvas类代表画布,通过该类提供的构造方法,可以绘制各种图形. *通常情况下,要在Android中绘图,需要先创建一个继承自View类的视图,并且在该类中重

  • canvas绘制的直线动画

    话不多说,请看代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>first line</title> <style type="text/css"> body{ background: #456E89; } .canvas { height: 300px; width: 300px; margin: 0 a

  • JavaScript+html5 canvas实现图片破碎重组动画特效

    JavaScript+html5 canvas实现图片破碎重组动画特效

    也许你见过HTML5图片破碎动画特效,实现的原理也挺简单的.但是你应该没有见过视频也可以破碎重组,这个HTML5动画就是利用Canvas的相关特性,实现了点击鼠标让视频破碎重组的效果.在视频区域点击鼠标,即可让该区域的视频破碎,让后经过一段时间后,破碎的区域又可以重组还原,视觉效果非常棒. HTML代码 <div style="display:none"> <video id="sourcevid" autoplay="true"

  • javascript+HTML5的Canvas实现Lab单车动画效果

    javascript+HTML5的Canvas实现Lab单车动画效果

    本文实例讲述了javascript+HTML5的Canvas实现Lab单车动画效果.分享给大家供大家参考.具体如下: 这里运用HTML5实现的单车动画,运行一下效果你就明白了,不过不要在IE8下测试,没效果的.请在支持最新HTML3和CSS3的浏览器下测试,祝您好运. 运行效果截图如下: 具体代码如下: <html> <head> <title>Canvas Lab单车动画,HTML5动画</title> </head> <script t

  • js canvas实现擦除动画

    本文实例为大家分享了canvas擦除动画的实现原理.实现代码.以及在实现过程中遇到的问题,供大家参考,具体内容如下 原理总结为就是在移动设备上将某张图片擦掉显示另一张图片,利用canvas来实现. 如果是用户手动擦除,则需要监听touchmove,touchend等事件,并计算相应的坐标,利用canvas的clearRect或rect 画弧线或画线来实现.但是这会造成在androd手机上存在卡顿的现象. canvas有个globalCompositeOperation属性,这个属性的默认值是so

  • Canvas实现放射线动画效果

    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-r

  • js canvas实现写字动画效果

    本文实例为大家分享了js canvas实现写字动画效果展示的具体代码,供大家参考,具体内容如下 页面html: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>学写一个字</title> <script src="jquery-2.1.3.min.js" type="t

  • JS Canvas接口和动画效果大全

    概述 <canvas>元素用于生成图像.它本身就像一个画布,JavaScript通过操作它的 API,在上面生成图像.它的底层是一个个像素,基本上<canvas>是一个可以用JavaScript操作的位图(bitmap). 它与 SVG 图像的区别在于,<canvas>是脚本调用各种方法生成图像,SVG 则是一个 XML 文件,通过各种子元素生成图像. 使用 Canvas API 之前,需要在网页里面新建一个<canvas>元素. <canvas id

  • JS+canvas绘制的动态机械表动画效果

    JS+canvas绘制的动态机械表动画效果

    本文实例讲述了JS+canvas绘制的动态机械表动画效果.分享给大家供大家参考,具体如下: 先来看看运行效果: 完整实例代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net canvas时钟</title> <style> canvas { border: 1px

  • JavaScript+Canvas实现带跳动效果的粒子动画

    目录 前言 实现过程 运行效果 总结 前言 用 HTML5 的 Canvas 元素实现一个带有跳动效果的粒子动画.会用到 Canvas 的2D渲染上下文,通过 JavaScript 编写绘图代码,实现画布上一系列粒子的随机运动和相互作用.还会使用 CSS3 动画属性,使得画布背景颜色和粒子颜色能够流畅地过渡,达到更加自然的效果. 代码运行效果在底部 实现过程 1.创建 Canvas 元素,并获取其上下文 在实现粒子跳动动画的过程中,第一步需要创建一个 Canvas 元素,并获取其上下文.Canv

  • Css3制作变形与动画效果

    Css3制作变形与动画效果

    下面通过图文并茂的方式给大家展示下css3制作变形与动画效果 css3制作动画的几个属性:变形(transform),过渡(transition)和动画(animation). 下面介绍:过渡transition. 一.例子 先通过一个例子感性认识一下transition的动画效果. 鼠标放上去,div宽度从100px增大到200px. <style type="text/css"> div{ width: 100px; height: 100px; background-

  • 使用JS实现气泡跟随鼠标移动的动画效果

    使用JS实现气泡跟随鼠标移动的动画效果

    气泡跟随鼠标移动,并在每次点击时产生不同的变化 效果如下 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 简单的气泡效果 </title> <style type="text

  • JavaScript+html5 canvas制作的百花齐放效果完整实例

    JavaScript+html5 canvas制作的百花齐放效果完整实例

    本文实例讲述了JavaScript+html5 canvas制作的百花齐放效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> body { margin:0; padding:0; } #canvas { border:5px solid gra

  • JavaScript+html5 canvas制作色彩斑斓的正方形效果

    JavaScript+html5 canvas制作色彩斑斓的正方形效果

    本文实例讲述了JavaScript+html5 canvas制作色彩斑斓的正方形效果.分享给大家供大家参考,具体如下: 运行效果截图如下: index.html: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <title>canvas中的透明度</t

随机推荐