<!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. 在Ubuntu上搭建Hadoop群集

    前面我搭建的Hadoop都是单机伪分布式的,并不能真正感受到Hadoop的最大特点,分布式存储和分布式计算.所以我打算在虚拟机中同时开启3台机器,实现分布式的Hadoop群集. 1.准备3台Ubunt ...

  2. 基于H5的微信支付开发详解

    这次总结一下用户在微信内打开网页时,可以调用微信支付完成下单功能的模块开发,也就是在微信内的H5页面通过jsApi接口实现支付功能.当然了,微信官网上的微信支付开发文档也讲解的很详细,并且有实现代码可 ...

  3. BZOJ 3172: [Tjoi2013]单词 [AC自动机 Fail树]

    3172: [Tjoi2013]单词 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 3198  Solved: 1532[Submit][Status ...

  4. j2ee之Filter使用实例（页面跳转）

    javax.servlet.Filter类中主要有三个方法. public void destroy(); //销毁对象 public void doFilter(ServletRequest req ...

  5. BZOJ1298[SCOI2009]骰子的学问

    Description Input 第一行为两个整数n, m.第二行有n个整数,为a1,a2, -, an. Output 包含n行,每行m个1~n×m的正整数,各不相同,以空格分开.如果有多解,输出 ...

  6. codevs 1164 统计数字

    时间限制: 1 s  空间限制: 128000 KB  题目等级 : 白银 Silver 题目描述 Description [问题描述]某次科研调查时得到了n个自然数,每个数均不超过150000000 ...

  7. codevs 2830 蓬莱山辉夜

    2830 蓬莱山辉夜 http://codevs.cn/problem/2830/ 题目描述 Description 在幻想乡中,蓬莱山辉夜是月球公主,居住在永远亭上,二次设定说她成天宅在家里玩电脑, ...

  8. [LeetCode] Ugly Number II 丑陋数之二

    Write a program to find the n-th ugly number. Ugly numbers are positive numbers whose prime factors ...

  9. [LeetCode] Happy Number 快乐数

    Write an algorithm to determine if a number is "happy". A happy number is a number defined ...

  10. 20145222《信息安全系统设计基础》Linux常用命令汇总

    学习Linux时常用命令汇总 通过Ctrl+f键可在该网页搜索到你想要的命令. Linux中命令格式为:command [options] [arguments] //中括号代表是可选的,即有些命令不 ...