非常不错的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. 《SAS编程与数据挖掘商业案例》学习笔记之十八

    接着曾经的<SAS编程与数据挖掘商业案例>,之前全是sas的基础知识,如今開始进入数据挖掘方面笔记,本文主要介绍数据挖掘基本流程以及应用方向,并以logistic回归为例说明. 一:数据挖 ...

  2. 【LeetCode-面试算法经典-Java实现】【063-Unique Paths II（唯一路径问题II）】

    [063-Unique Paths II(唯一路径问题II)] [LeetCode-面试算法经典-Java实现][全部题目文件夹索引] 原题 Follow up for "Unique Pa ...

  3. jsbrige

    http://www.cnblogs.com/zhangqie/p/6724252.html

  4. django 笔记4 数据库操作

    django操作数据库 orm操作 对应关系 models.tb.objects.filter(id__gt=) models.tb.objects.filter(id=) models.tb.obj ...

  5. Flask Flash闪现

    Flash介绍以及工作方式 flash中添加消息 取出flash中的消息 Flash介绍以及工作方式 - 介绍: flash :闪现 一个好的应用和用户界面都需要良好的反馈. 如果用户得不到足够的反馈 ...

  6. Linux下大型容量件的切割与合并

    Linux下大型容量件的切割与合并 当前目录下有sp4.exe文件容量129M我用64的U盘把spe.exe考到另一台机器上#split -b 60m sp4.exe-b, --bytes=SIZE  ...

  7. sql中使用正则查询

  8. Linux常用视频播放器

    1.SMplayer是一款跨平台的视频播放工具,可以支持大部分的视频和音频文件.它支持音频轨道切换.允许调节亮度.对比度.色调.饱和度.伽玛值,按照倍速.4倍速等多种速度回放.还可以进行音频和字幕延迟 ...

  9. C/C++(C++类型增强)

    C++类型增强 类型检查更严格 把一个const类型的指针赋给非const类型的指针.c语言中可以通的过,但是在c++中则编不过去 const int a = 10; a = 100;//const修 ...

  10. CSUOJ 1549 Navigition Problem

    1549: Navigition Problem Time Limit: 1 Sec  Memory Limit: 256 MBSubmit: 65  Solved: 12 Description N ...