canvas变幻曲线
<!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变幻曲线的更多相关文章
- html5 canvas贝塞尔曲线篇(下)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html5 canvas贝塞尔曲线篇(上)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- canvas绘制曲线
canvas绘制曲线 方法 quadraticCurveTo(cp1x, cp1y, x, y) 只有一个控制点的贝塞尔曲线(其实就是控制点分别与起始点和结束点连线的公切线) bezierCurveT ...
- canvas贝塞尔曲线
贝塞尔曲线 Bézier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲线. 曲线定义:起始点.终止点.控制点.通过调整控制点,贝塞尔曲线的形状会发生变化. 1962年,法国数学家Pierr ...
- javascript -- canvas绘制曲线
绘制曲线有几种思路: 1.通过quadraticCurveTo(controlX, controlY, endX, endY)方法来绘制二次曲线 2.通过bezierCurveTo(controlX1 ...
- HTML5 Canvas ( 贝塞尔曲线, 一片星空加绿地 ) quadraticCurveTo, bezierCurveTo
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- canvas贝塞尔曲线 - 2
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAugAAAH7CAIAAAARkv1vAAAgAElEQVR4nOy9e5Ab13ngO7Z37dlsaM
- canvas贝塞尔曲线 - 1
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvEAAAIcCAIAAADwgGbqAAAgAElEQVR4nOy9a4wb55nn20kOZhq7o8
- canvas ：曲线的面积图 加渐变效果
document.body.innerHTML = '<canvas></canvas>' var cvs = document.querySelector("can ...
随机推荐
- 海康威视，大华，宇视 的视频监控iOS Demo
原谅我只提供一个链接,我在这里写了两遍,最后加个链接页面卡死了,下面的demo,最好真机调试.(写博客还是在别的地方写复制到这里比较好!) 一个画面可以做,4个,9个,16个画面原理是一样的,集合到自 ...
- 配置mysql允许远程连接的方法
默认情况下,mysql只允许本地登录,如果要开启远程连接,则需要修改/etc/mysql/my.conf文件. 一.修改/etc/mysql/my.conf找到bind-address = 127.0 ...
- oracle触发器
类型 行级触发器: FOR EACH ROW 影响的每一行都会执行触发器 语句级出发器 默认的模式,一句话才执行一次触发器 触发器不能嵌套,不能含有事务控制语句 何时触发 Before:条件运行前 A ...
- vim快捷键
#vim filename :scriptname //查看vim加载了哪些脚本 :set nu //设置行号 :set tabstop=4 //设置一个tab为4个空格长度 :set ai //设 ...
- x01.TodoList：Asp.Net 5 初探
ASP.NET 5 是比较新的,除了汤姆的博文,学习资料并不多.而学习没有例子上手,是比较痛苦的. 1.运行 vs2015,新建项目,选择 Asp.Net 5 WebApp 模板,默认运行即可.对照汤 ...
- Ubuntu15.10下华南师大锐捷认证客户端的使用详解
本文测试Linux系统环境为Ubuntu15.10 Destop,暂未在其他系统下验证过,不代表LTS版本或较旧的版本按照本文所述方法可以100%正确使用最新的锐捷认证客户端. 本文面向对象为华南师范 ...
- Linux文件操作的主要接口API及相关细节
操作系统API: 1.API是一些函数,这些函数是由linux系统提供支持的,由应用层程序来使用,应用层程序通过调用API来调用操作系统中的各种功能,来干活 文件操作的一般步骤: 1.在linux系统 ...
- Python Socket 编程——聊天室示例程序
上一篇 我们学习了简单的 Python TCP Socket 编程,通过分别写服务端和客户端的代码了解基本的 Python Socket 编程模型.本文再通过一个例子来加强一下对 Socket 编程的 ...
- BZOJ 1862: [Zjoi2006]GameZ游戏排名系统 [treap hash]
1862: [Zjoi2006]GameZ游戏排名系统 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 1318 Solved: 498[Submit][ ...
- 《使用Hibernate开发租房系统》内部测试笔试题
笔试总结 1．在Hibernate中,以下关于主键生成器说法错误的是( C). A．increment可以用于类型为long.short或byte的主键 B．identity用于如SQL Server ...