非常不错的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. 《AndroidStudio每日一贴》5. 怎样高速查看某个方法/注解的定义？

    操作方法: 使用快捷键 option + space 或 command + y 举个样例: 如以下的样例,我在输入@O的时候会出现代码补全列表,这个时候我想查看列表中项目的定义能够使用快捷键 opt ...

  2. Ubuntu 经常使用软件安装

    Chromium 14.04+ FlashPlayer 原理 就是安装一个flash插件而已啊,网上都没有详解. 我们首先在浏览器地址栏输入chrome://plugins, 全部插件都会展示出来了. ...

  3. .net数字转换成汉字大写

    public class Num2Rmb { private String[] hanArr={"零","壹","贰","叁&qu ...

  4. sql中的 SET QUOTED_IDENTIFIER OFF、SET ANSI_NULLS ON

    代码 Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-- ...

  5. Aix下查看内存命令

    1. 查看物理内存配置 # lsdev -Cc memory  查看配置的物理内存设备,下面为其输出示例:  L2cache0 Available L2 Cache   mem0 Available ...

  6. Java基础算法

    i++;++i; i--;--i; int a=5;int b=a++;++放在后面,表示先使用a的值,a再加1b=5,a=a+1,a=6 int c=5;int d=++c;++放在前面,表示先将c ...

  7. [Chromium文档转载，第003章]Proposal: Mojo Synchronous Methods

    Proposal: Mojo Synchronous Methods yzshen@chromium.org 02/02/2016 Overview Currently there are quite ...

  8. python多线程理解

    在发送网络请求的过程中,单个请求的速度总是有着很大的限制,而任务往往需要以更快的速度去执行,这时多线程就是一个很好地选择.python已经给我们封装好了多线程库thread和threading. th ...

  9. 读MBA经历回想（下）做法决定结果——北漂18年（49）

    上期聊了目的决定了手段,这次说说详细做法决定了最后的结果. 差额面试被淘汰的高分学员 2005年,是北京邮电大学工商管理学入学考试第一个差额淘汰的年份.意思是过分数线(165分)的人数超过了录取人数, ...

  10. ubuntu下vim中内容拷贝到浏览器

    在vim中编辑好了代码想要复制出来到浏览器或者其它地方.用yy复制后去别的地方粘帖发现根本不是当初复制的内容,非常头疼-- 这是由于vim中有它自己的一套剪贴板系统(clipboard).这套系统和u ...