<!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. ViewPager之Fragment页面切换

    一.概述 ViewPager是android-support-v4中提供的类,它是一个容器类,常用于页面之间的切换. 继上篇文章<ViewPager之引导页>之后,本文主要介绍ViewPa ...

  2. 【代码笔记】iOS-用户发布后能保存崩溃

    一,工程图. 二,代码. AppDelegate.m #import "AppDelegate.h" #import "RootViewController.h" ...

  3. swift-分支

    swift相当于OC的比较 if后的括号可以省略 if后只能接bool值 if后的大括号不能省略 let num1 = 5.0 let num2 = 4.0 let boo :Bool = true ...

  4. block为什么用copy以及如何解决循环引用

    在完成项目期间,不可避免的会使用到block,因为block有着比delegate和notification可读性更高,而且看起来代码也会很简洁.于是在目前的项目中大量的使用block. 之前给大家介 ...

  5. yii2 ActiveRecord多表关联以及多表关联搜索的实现

    作者:白狼 出处:http://www.manks.top/yii2_many_ar_relation_search.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明 ...

  6. 原创 C++应用程序在Windows下的编译、链接（四）动态链接

    4动态链接 4.1概述 在静态链接阶段,链接器为PE文件生成了导入表,导出表,符号表,并调整了Call指令后面的操作数,在程序调用的时候,能够直接地或者间接地定位到IAT中的某个位置,在PE文件中,该 ...

  7. T-SQL 查询XML

    我们经常在SQL Server列中存一些XML来作为配置文件或者是保存特殊信息,那么如何将其展开并查询它或将其呈现为关系数据? 其实在T-SQL 下可以很容易的实现. 示例xml <catalo ...

  8. MySQL 索引

    MySQL索引的建立对于MySQL的高效运行是很重要的,索引可以大大提高MySQL的检索速度. 打个比方,如果合理的设计且使用索引的MySQL是一辆兰博基尼的话,那么没有设计和使用索引的MySQL就是 ...

  9. MySQL多实例安装

    1.安装MySQL需要的依赖的包和编译软件   (1)安装MySQL需要的依赖包 安装MySQL之前,最好先安装MySQL需要的依赖包,不然后面会出现报错,还得回来安装MySQL的依赖包. [root ...

  10. linux下解压.tar.gz .tar.bz2

     从网络上下载到的源码包, 最常见的是 .tar.gz 包, 还有一部分是 .tar.bz2包要解压很简单 :.tar.gz     格式解压命令为          tar   -zxvpf   x ...