非常不错的canvas效果，下面是html代码。

 <!DOCTYPE html>

 <html>

  <head>

   <meta charset="utf-8" />

   <meta name="author" content="" />

   <meta name="keywords" content="" />

   <meta name="description" content="" />

   <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />

   <title>  似圆非圆，似线非线 </title>

   <style>

     .stage{position:absolute;left:0;top:0;width:100%;height:100%;background:#000;}

   </style>

  </head>

  <body>

   <canvas class="stage"></canvas>

   <script>

     (function(win,el){

         var cvs=document.querySelector(el),

             ctx=cvs.getContext("2d"),

             width,

             height,

             mouse={},

             scale=1,

             min_scale=1,

             max_scale=2.5,

             isMouseDown=false,

             radius=50,

             circlesNum=10,

             circles=[];

             Function.prototype.method=function(k,v){

                return this.prototype[k]=v,this;

             };

             function Circle(x,y,center,radius){

                this.x=x;

                this.y=y;

                this.curX=x;

                this.curY=y;

                this.center=center;

                this.speed=0.01+Math.random()*0.04;

                this.angle=0;

                this.color="hsl("+Math.random()*360+",100%,50%)";

                this.lineWidth=1;

                this.targetWidth=5;

                this.radius=radius;

             }

             Circle.method("draw",function(ctx,zoom){

                 var x=this.x,y=this.y;

                 this.angle+=this.speed;

                 this.curX+=(this.center.x-this.curX)*this.speed;

                 this.curY+=(this.center.y-this.curY)*this.speed;

                 this.x=this.curX+Math.cos(this.angle)*this.radius*zoom;

                 this.y=this.curY+Math.sin(this.angle)*this.radius*zoom;

                 this.lineWidth+=(this.targetWidth-this.lineWidth)*0.05;

                 if(Math.abs(this.targetWidth-this.lineWidth)<0.5)

                 {

                    this.targetWidth=1+Math.random()*6;

                 }

                 ctx.strokeStyle=this.color;

                 ctx.lineWidth=this.lineWidth;

                 ctx.beginPath();

                 ctx.moveTo(x,y)

                 ctx.lineTo(this.x,this.y);

                 ctx.stroke();

             });

             function init(){

                 var bound=cvs.getBoundingClientRect(),i=circlesNum,segment=i*10;

                 cvs.width=width=bound.width;

                 cvs.height=height=bound.height;

                 ctx.fillStyle="rgba(0,0,0,.05)";

                 ctx.lineCap="round";

                 mouse.x=width/2;

                 mouse.y=height/2;

                 while(i--)

                   circles[i]=new Circle(0,0,mouse,radius+Math.random()*segment);

                 cvs.addEventListener("mousemove",function(e){

                     mouse.x=e.clientX;

                     mouse.y=e.clientY;

                 },false);

                 cvs.addEventListener("mousedown",function(){

                     isMouseDown=true;

                 },false);

                 cvs.addEventListener("mouseup",function(){

                     isMouseDown=false;

                 },false);

                 cvs.addEventListener("mouseout",function(){

                     isMouseDown=false;

                 },false);

                 render();

             }

             function render(){

               var i=circlesNum;

               scale+=isMouseDown?(max_scale-scale)*0.05:(min_scale-scale)*0.05;

               ctx.fillRect(0,0,width,height);

               while(i--)

                  circles[i].draw(ctx,scale);

               requestAnimationFrame(render);

             }

             init();

     })(this,".stage");

   </script>

  </body>

 </html>

非常不错的canvas效果，线随心动的更多相关文章

  1. 一个不错的loading效果--IT蓝豹

    一个不错的loading效果 介绍:一个不错的loading加载效果,弹性收缩,效果不错,学习android动画的朋友可以下载来研究研究本例子其实由SeekBar实现,由MetaballView,Me ...

  2. 非常不错的KPTimePicker效果源码

    非常不错的KPTimePicker效果源码,实现特殊设计的时间选择器.用户选择时间是通过滑动一个圆环,并且屏幕的颜色会随着时间点的推移变暗或者变亮,喜欢的朋友可以下载研究一下吧. 源码大家可以到源码天 ...

  3. 兼容IE浏览器的canvas画线和圆圈

    1.新建test.html文件,代码如下: <!DOCTYPE html><html><head>    <meta charset="utf-8& ...

  4. 那些不错的 [ Html5 + CSS3 + Canvas ] 效果！

    apng制作工具:http://isparta.github.io/how.html apng制作文章:http://isux.tencent.com/introduction-of-apng.htm ...

  5. canvas 画线

    一.canvas是基于状态的绘图环境 1.canvas是基于状态的绘制 context.moveTo(100,100); context.lineTo(700,700); context.lineWi ...

  6. 知乎背景图 canvas 效果

    思路分析: 1.创造一块画布, 2.在画布内随机产生一些小球,小球位置,半径,颜射,大小,速度等都可以随机产生, 3.定义画小球函数与小球移动函数, 4.将每一个小球圆心都与其它小球链接, 5判断每一 ...

  7. 自定义控件详解（三）：Canvas效果变换

    Canvas 画布 从前面我们已经知道了 Canvas 类可以绘出 各种形状. 这里学习一下Canvas 类的变换效果(平移,旋转等) 首先需要了解一下Canvas 画布, 我们用Canvas.Dra ...

  8. canvas绘制线和矩形

    ###canvas绘制矩形 HTML中的元素canvas只支持一种原生的图形绘制:矩形.所有其他的图形的绘制都至少需要生成一条路径 1.绘制矩形 canvas提供了三种方法绘制矩形: ----> ...

  9. canvas连线特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 【Android实战】Socket消息通信

    这篇博客的内容是基于http://my.oschina.net/fengcunhan/blog/178155进行改造的.所以须要先看完这篇博客,然后再来看以下的内容. 1.须要完毕的功能是直播间的so ...

  2. HDU 1730 Northcott Game

    简单的尼姆博弈.想到了非常easy! 就拿一行举例.怎么赢.? 就是死劲挨着对方移,当然假设本身就是挨着的,又轮到你移动了,那么对于这一行来讲.你就是输的!! 由此可见每一行的棋子起始距离就显得尤为重 ...

  3. vue13过滤器 debounce延迟、limitBy、filterBy、orderBy

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. doT.js灵活运用之嵌入使用

    基础的base_info_area <div id="base_info_area"></div> <script type="text/h ...

  5. 基于.NET平台常用的框架技术整理

    个人整理 部分收藏于:http://www.cnblogs.com/hgmyz/p/5313983.html 自从学习.NET以来,优雅的编程风格,极度简单的可扩展性,足够强大开发工具,极小的学习曲线 ...

  6. 简单STL笔记

    想了好久,还是把自己了解的先整理一下吧,毕竟老是忘,这里主要简单介绍三种容器 set,queue,vector,以及栈 stack,队列queue 的简单用法.一.set 在set中,效率比vecto ...

  7. MVC异常过滤器

    MVC过滤器 一般的过滤器执行顺序 IAuthorizationFilter->OnAuthorization(授权) IActionFilter          ->OnActionE ...

  8. mysql简单备份脚本

    #!/bin/bash #army.han #2016-11-11 #new_gj_DBbackup#备份路径配置 GSdir='/data/dbbackup/mysqlDB' TIME=`date ...

  9. Java并发包之CountDownLatch用法

    CountDownLatch计数器闭锁是一个能阻塞主线程,让其他线程满足特定条件下主线程再继续执行的线程同步工具. Latch闭锁的意思,是一种同步的工具类.类似于一扇门:在闭锁到达结束状态之前,这扇 ...

  10. Jsp学习总结（1）——JSP九大内置对象和四种属性范围解读

    一.四种属性范围 1.1.在JSP中提供了四种属性保存范围 page:在一个页面内保存属性,跳转之后无效 request:在一次服务请求范围内,服务器跳转后依然有效 session:-在一次会话范围内 ...