<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>canvas变换曲线</title>

    </head>

    <style type="text/css">

    	body {

		overflow: hidden;

		background:#000;

		margin:0;

		}

    </style>

    <body>

    	<canvas id='changeLine'></canvas>

    </body>

    <script>

    	window.onload=function(){

			var ctx=document.getElementById('changeLine');

			var context=ctx.getContext('2d');

			var winW=window.innerWidth;

			var winH=window.innerHeight;

			ctx.width=winW;

			ctx.height=winH;

			//包含每个点的信息的数组

			var line=[];

			var num=10;

			var oldPoint =[];

			//随机函数

			function rnd(n,m){

				return Math.floor(Math.random()*(m-n)+n)

				}

			//生成了10个点

			for(var i=0;i<num;i++){

				line[i]={

					w:0,

					h:0,

					x:rnd(0,winW),

					y:rnd(0,winH),

					speedX:rnd(-5,5),

					speedY:rnd(-5,5)

					}

				}

			//画点

			function drawPoint(p){

				context.fillStyle='#fff';

				context.fillRect(p.x,p.y,p.w,p.h);

				context.strokeRect(p.x,p.y,p.w,p.h);

				}

			//定义每个点的速度，碰撞边界

			function drawObj(){

				var arr=[];

				context.clearRect(0,0,winW,winH);

				for(var i=0;i<num;i++){

					drawPoint(line[i]);

					line[i].x+=line[i].speedX;

					line[i].y+=line[i].speedY;

					if(line[i].x<=0){

						line[i].x =0;

						line[i].speedX*=-1;

						}

					if(line[i].x>=winW-line[i].w){

						line[i].x = winW-line[i].w;

						line[i].speedX*=-1;

						}

					if(line[i].y<=0){

						line[i].y =0;

						line[i].speedY*=-1;

						}

					if(line[i].y>=winH-line[i].h){

						line[i].y = winH-line[i].h;

						line[i].speedY*=-1;

						}

					}

					/*context.beginPath();

					context.moveTo(line[0].x,line[0].y);

					for(var j =1; j < num; j++){

						context.lineTo(line[j].x,line[j].y);

						}

					context.strokeStyle ="rgba(255,0,144,1)";

					context.closePath();

					context.stroke();*/

					for(var i =0; i <num ; i++){

						arr.push({x:line[i].x , y:line[i].y});

					}

					oldPoint.push(arr);

					while(oldPoint.length >15){

						oldPoint.shift();

					}

					for(var i =0; i < oldPoint.length; i++){

						context.beginPath();//开始

						context.moveTo(oldPoint[i][0].x,oldPoint[i][0].y);//起点

						for(var j =1; j < num; j++){

						context.lineTo(oldPoint[i][j].x,oldPoint[i][j].y);//每个点连接起来

						}

						context.closePath();//闭合

						var opacity = i/oldPoint.length;

						context.strokeStyle ="rgba(255,0,144,"+opacity+")";

						context.stroke();

					}

				}

				drawObj();

			setInterval(drawObj,1000/60);

			window.onresize =function(){

				winW = window.innerWidth;

				winH = window.innerHeight;

				canvas.width = winW;

				canvas.height = winH;

			};

			}

    </script>

</html>

　　

canvas变幻曲线的更多相关文章

  1. html5 canvas贝塞尔曲线篇(下)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. html5 canvas贝塞尔曲线篇(上)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. canvas绘制曲线

    canvas绘制曲线 方法 quadraticCurveTo(cp1x, cp1y, x, y) 只有一个控制点的贝塞尔曲线(其实就是控制点分别与起始点和结束点连线的公切线) bezierCurveT ...

  4. canvas贝塞尔曲线

    贝塞尔曲线 Bézier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲线. 曲线定义:起始点.终止点.控制点.通过调整控制点,贝塞尔曲线的形状会发生变化. 1962年,法国数学家Pierr ...

  5. javascript -- canvas绘制曲线

    绘制曲线有几种思路: 1.通过quadraticCurveTo(controlX, controlY, endX, endY)方法来绘制二次曲线 2.通过bezierCurveTo(controlX1 ...

  6. HTML5 Canvas ( 贝塞尔曲线, 一片星空加绿地 ) quadraticCurveTo, bezierCurveTo

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. canvas贝塞尔曲线 - 2

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAugAAAH7CAIAAAARkv1vAAAgAElEQVR4nOy9e5Ab13ngO7Z37dlsaM

  8. canvas贝塞尔曲线 - 1

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvEAAAIcCAIAAADwgGbqAAAgAElEQVR4nOy9a4wb55nn20kOZhq7o8

  9. canvas ：曲线的面积图 加渐变效果

    document.body.innerHTML = '<canvas></canvas>' var cvs = document.querySelector("can ...

随机推荐

  1. IOS之Objective-C学习 工厂模式

    工厂模式在父类里声明(可实现)创建对象的一个接口,让子类决定实例化哪个类,也就是说让一个类的实例化延迟到子类中生产. 工厂模式一般用于在不同地方创建对象和项目部署依赖多个数据库的时候. 工厂模式有三种 ...

  2. Tomcat 服务应用

    转自:http://wiki.jikexueyuan.com/project/tomcat/windows-service.html Tomcat8 是一个服务应用,能使 Tomcat 8 以 Win ...

  3. WPF Path

    在WPF中,自定义控件,经常用到Path. Path可以绘制多边形.边框.线条.简单的图标等. 1.Xaml中用法: <Path Stroke="DodgerBlue" St ...

  4. Spring MVC之@RequestParam @RequestBody @RequestHeader 等详解

    (转自:http://blog.csdn.net/walkerjong/article/details/7946109#) 引言: 接上一篇文章,对@RequestMapping进行地址映射讲解之后, ...

  5. ORA-00054: resource busy and acquire with NOWAIT specified

    删除表时遇到 ORA-00054:资源正忙,要求指定NOWAIT 错误.以前在灾备中心遇到过. 资源被锁定了,没有办法删除. 报错日志:ORA-00054: resource busy and acq ...

  6. [No00008F]PLSQL自动登录，记住用户名密码&日常使用技巧

    配置启动时的登录用户名和密码 这是个有争议的功能,因为记住密码会给带来数据安全的问题. 但假如是开发用的库,密码甚至可以和用户名相同,每次输入密码实在没什么意义,可以考虑让PLSQL Develope ...

  7. [LeetCode] Verify Preorder Serialization of a Binary Tree 验证二叉树的先序序列化

    One way to serialize a binary tree is to use pre-oder traversal. When we encounter a non-null node, ...

  8. go reflect

    package main import ( "fmt" "reflect" // 反射包 ) type User struct{ //结构体类型 Id int ...

  9. redis配置文件详解

    基于redis2.4版本的配置文件. # 注意单位问题:当需要设置内存大小的时候,可以使用类似1k.5GB.4M这样的常见格式:## 1k => 1000 bytes# 1kb => 10 ...

  10. ActiveMQ安全配置

    1.activeMQ管理后台用户名.密码的设置 管理后台地址http://localhost:8161/admin 默认用户名密码admin admin 端口默认是8161,且服务采用的是服务器,所以 ...