非常不错的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. No enclosing instance of type E is accessible.

    No enclosing instance of type E  is accessible. 静态方法(main)中调用内部类,会出现这样的问题: 学习了:https://www.cnblogs.c ...

  2. X的追求道路

    X的追求道路 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描写叙述 X在大家的帮助下最终找到了一个妹纸,于是開始了漫漫的追求之路,那 ...

  3. android 视频开发2分之2（仿美拍，糗百）

    上一篇写了分段录制和合并视频.这一篇则是选择视频,然后截断视频. 1.从sdcard中找到视频资源: 2.分析视频,拿到你须要的帧数当你的图片.(我的是依据參数来算的多少秒1帧的图片,通常是1秒1帧来 ...

  4. 3.AngularJS-过滤器

    转自:https://www.cnblogs.com/best/p/6225621.html 二.过滤器 使用过滤器格式化数据,变换数据格式,在模板中使用一个插值变量.语法格式如下: {{ expre ...

  5. 安装vnc出现的问题

    重启vnc 命令:/sbin/service vncserver start或者vncserver VNC的启动/停止/重启 #service vncserver start/stop/restart ...

  6. Linux系统安全加固（一）

    Linux系统安全加固(一)     去年8月,某所网站遭黑客攻击瘫痪虽然港交所随后及时启用备用系统,但还是致使7支股票1支债卷被迫停牌,次日再次遭受攻击而瘫痪:在去年年底继CSDN信息安全出现之后, ...

  7. sql中使用正则查询

  8. 基于SIFT的点云关键点提取

    这篇博文主要介绍SIFT算法在提取点云图像关键点时的具体用法. 尺度不变特征转换(Scale-invariant feature transform,SIFT)是David Lowe在1999年发表, ...

  9. SQL try catch处理

    ALTER PROC usp_AccountTransaction @AccountNum INT, @Amount DECIMAL AS BEGIN BEGIN TRY --Start the Tr ...

  10. 网络场景图WebScene介绍

    网络场景图的创建同样需要ID,然后再放入3维的地图底图中. 1.创建一个新的网络场景图 "esri/WebScene" var scene = new WebScene({ por ...