<!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. seL4之hello-2旅途(完成更新)

    seL4之hello-2旅途 2016/11/19 13:15:38 If you like my blog, please buy me a cup of coffee. 回顾上周 seL4运行环境 ...

  2. 在tmux中的vi 上下左右键变为了ABCD等字符

    在本机上用vim编辑时,上下左右键没有问题,但是在tmux中确出现ABCD等字符. 原因是在tmux这个终端,默认做了字符转换,网上搜了很多答案,解决问题的设置是: set term=xterm

  3. 数据库设计范式2——BC范式和第四范式

    我在很久之前的一篇文章中介绍了数据库模型设计中的基本三范式,今天,我来说一说更高级的BC范式和第四范式. 回顾 我用大白话来回顾一下什么是三范式: 第一范式:每个表应该有唯一标识每一行的主键. 第二范 ...

  4. centos本地yum源安装

    1.为DVD或U盘创建一个用于挂载的目录 [root@localhost ~]# mkdir /media/CentOS/ 2.查看DVD或U盘所在的路径 [root@localhost ~]# fd ...

  5. cookie 跨域访问的解决方案

    Cookie 同域单点登录  最近在做一个单点登录的系统整合项目,之前我们使用控件实现单点登录(以后可以介绍一下).但现在为了满足客户需求,在不使用控件情况下实现单点登录,先来介绍一下单点登录.    ...

  6. BZOJ 2820: YY的GCD [莫比乌斯反演]【学习笔记】

    2820: YY的GCD Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 1624  Solved: 853[Submit][Status][Discu ...

  7. 封装的ajax

    function ajax(method,url,data,success){ if(window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, ...

  8. common-pool2 学习：thrift连接池的另一种实现

    对象池是一种很实用的技术,经典的例子就是数据库连接池.去年曾经从零开始写过一个thrift客户端连接池.如果不想重造轮子,可以直接在apache开源项目commons-pool的基础上开发. 步骤: ...

  9. [LeetCode] Design Tic-Tac-Toe 设计井字棋游戏

    Design a Tic-tac-toe game that is played between two players on a n x n grid. You may assume the fol ...

  10. PHP中多站点的设置

    当初配置多站点的问题,整了几个小时没整好,第二天一看才发现是单词拼错了(无奈..),所以能复制的一定复制!!! 1,首先进行Apache的配置(先复制一份进行备份,以免丢失). 进入Apache文件下 ...