<!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版打地鼠游戏源码

    打地鼠游戏源码,游戏是一款多关卡基于cocos2d的iPad打地鼠游戏源码,这也是一款高质量的打地鼠游戏源码,可以拥有逐步上升的关卡的设置,大家可以在关卡时设置一些商业化的模式来盈利的,非常完美的一款 ...

  2. Linux shell脚本编程(三)

    Linux shell脚本编程 流程控制: 循环语句:for,while,until while循环: while CONDITION; do 循环体 done 进入条件:当CONDITION为“真” ...

  3. 为Ubuntu的root设置密码

    问题描述:当安装好Ubuntu系统的时候,root用户没有密码,需要设置. 解决方法:

  4. 压缩和解压文件：tar gzip bzip2 compress(转)

    tar[必要参数][选择参数][文件] 压缩:tar -czvf filename.tar.gz targetfile解压:tar -zxvf filename.tar.gz参数说明: -c 建立新的 ...

  5. Intellij IDEA的一些东西

    Intellij IDEA的一些东西 2016-03-19 15:26 Ctrl + R 在当前文件进行文本替换 (必备) Ctrl + N 根据输入的 类名 查找类文件 Ctrl + Ctrl + ...

  6. 初识NodeJS

    1.JavaScript 模块化规范 浏览器环境 AMD Asynchronous Module Definition RequireJS CMD Common Module Definition S ...

  7. vi安装Vundle+YouCompleteMe+注释快捷'scrooloose/nerdcommenter'

    Vundle is short for Vim bundle and is a Vim plugin manager. 从git上下载vundle $ git clone https://github ...

  8. [原]CentOS7部署PostGis

    转载请注明原作者(think8848)和出处(http://think8848.cnblogs.com) 本文参考了<An almost idiot's guide to install Pos ...

  9. [LeetCode] Largest Divisible Subset 最大可整除的子集合

    Given a set of distinct positive integers, find the largest subset such that every pair (Si, Sj) of ...

  10. PHP的性能大坑－－strtotime函数

    最近在做一个游戏数据统计后台,最基础的功能是通过分析注册登录日志来展示用户数据.在公司内部测试,用户量很少,所以就没有发现什么性能问题.但是这两天一起放到真实的测试环境,用户量噌噌地就涌进来了,从下午 ...