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 ...
随机推荐
- 安装redis以windows服务形式
安装redis以windows服务形式 安装redis以windows服务形式 redis windows windows 服务 以前跑redis,老是要开一个命令行窗口,一旦关闭,redis服务就挂 ...
- 【译】Spring 4 @PropertySource和@Value注解示例
前言 译文链接:http://websystique.com/spring/spring-propertysource-value-annotations-example/ 本篇文章将展示如何通过@P ...
- 分布式一致性算法--Raft
前面一篇文章讲了Paxos协议,这篇文章讲它的姊妹篇Raft协议,相对于Paxos协议,Raft协议更为简单,也更容易工程实现.有关Raft协议和工程实现可以参考这个链接https://raft.gi ...
- Scala访问修饰符（四）
Scala 访问修饰符基本和Java的一样,分别有:private,protected,public. 如果没有指定访问修饰符符,默认情况下,Scala对象的访问级别都是 public. Scala ...
- Oracle学习笔记七 锁
锁的概念 锁是数据库用来控制共享资源并发访问的机制. 锁用于保护正在被修改的数据 直到提交或回滚了事务之后,其他用户才可以更新数据 对数据的并发控制,保证一致性.完整性.
- 04讲 正确使用heterogeneous类型的元件
heterogeneous类型的元件1.可能出现的错误 再使用数个heterogeneous 元件的时候会因为分部件的不匹配 2.出现错误的原因原因是这四个运放,软件它并不识别那两个是配在一起 ...
- [bzoj3673][可持久化并查集 by zky] (rope(可持久化数组)+并查集=可持久化并查集)
Description n个集合 m个操作 操作: 1 a b 合并a,b所在集合 2 k 回到第k次操作之后的状态(查询算作操作) 3 a b 询问a,b是否属于同一集合,是则输出1否则输出0 0& ...
- BZOJ 1927: [Sdoi2010]星际竞速
1927: [Sdoi2010]星际竞速 Time Limit: 20 Sec Memory Limit: 259 MBSubmit: 2051 Solved: 1263[Submit][Stat ...
- [LeetCode] Matchsticks to Square 火柴棍组成正方形
Remember the story of Little Match Girl? By now, you know exactly what matchsticks the little match ...
- [LeetCode] Largest Number 最大组合数
Given a list of non negative integers, arrange them such that they form the largest number. For exam ...