非常不错的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. vue10 v-text v-html

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

  2. spring IOC --- 控制反转（依赖注入）----简单的实例

    IoC(Inversion of Control)控制反转,对象创建责任的反转,在spring中BeanFacotory是IoC容器的核心接口,负责实例化,定位,配置应用程序中的对象及建立这些对象间的 ...

  3. 【Docker构建私有仓库】

    Docker默认不允许非HTTPS方式推送镜像,我们可以通过Docker的配置选项来取消此限制: [root@fedora ~]# cat /etc/docker/daemon.json { &quo ...

  4. centos inotify-rsync配置

    安装 yum -y install inotify-tools yum install rsync innotify说明 inotify介绍-- 是一种强大的.细颗粒的.异步的文件系统监控机制,*&a ...

  5. JS jQuery查看系统中安装的字体

    1.下载插件:FontDetect插件  地址:http://www.lalit.org/lab/javascript-css-font-detect/ 或者复制以下代码到fontdetect.js: ...

  6. Unity容器实现自动注册

    如何创建Unity容器? 首先NuGet搜索Unity, 该示例中使用的版本为4.0.1 新建控制台程序 示例中使用常规操作, 创建一个IPay接口, 分别有两个实现类: ApplePay.Huawe ...

  7. C# 操作Excel常见错误

    1.未在本地注册 string strConn = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + FilePath + &qu ...

  8. 在XEN上启动guest时loopback设备不足

    现象: 通常出现在用户挂载了多个img到guest上,会发现无法再创建guest或者无法启动guest的现象. /var/log/xen/xen-hot-plug.log中错误如下: xenstore ...

  9. Android Netroid解析之——断点续传下载及问题修正

    提到Netroid也许非常多人不知道这个框架,但我假设说Volley想必没有人不知道吧. Netroid是一个基于Volley实现的Android Http库.提供运行网络请求.缓存返回结果.批量图片 ...

  10. IsoAlgo3d - IDF/PCF pipeline 3d viewer

    IsoAlgo3d - IDF/PCF pipeline 3d viewer eryar@163.com Key Words. IDF, PCF, IsoAlgo, 3D 当前国际主流管道设计软件都可 ...