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 ...
随机推荐
- SSH面试题（struts2+Spring+hibernate）
struts2 + Spring +hibernate Hibernate工作原理及为什么要用? 原理: 1.读取并解析配置文件 2.读取并解析映射信息,创建SessionFactory ...
- [Erlang 0119] Erlang OTP 源码阅读指引
上周Erlang讨论群里面提到lists的++实现,争论大多基于猜测,其实打开代码看一下就都明了.贴出代码截图后有同学问这代码是哪里找的? "代码去哪里找?",关于Erla ...
- WPF CheckBox样式 ScrollViewer样式 WrapPanel、StackPanel、Grid布局
本节讲述布局,顺带加点样式给大家看看~单纯学布局,肯定是枯燥的~哈哈 那如上界面,该如何设计呢? 1.一些布局元素经常用到.Grid StackPanel Canvas WrapPanel等.如上这种 ...
- js 页面无滚动条添加滚轮事件
当页面无滚动条时,滑动滚轮时window.onscroll事件不会相应,此时应该去添加滚轮事件 var MouseWheelHandler=function(e){ e.preventDefault( ...
- C++ 使用ifstream读取数据，多读最后一行问题解决方法
C++文件读取时有一个bug,就是使用eof()判断文件结尾并不准确,最后一行会重复读取一次,可采用以下方法避免重复读取: while (!inFile.eof()) { inFile >> ...
- [LeetCode] UTF-8 Validation 编码验证
A character in UTF8 can be from 1 to 4 bytes long, subjected to the following rules: For 1-byte char ...
- 分分钟搞定IOS远程消息推送
一.引言 IOS中消息的推送有两种方式,分别是本地推送和远程推送,本地推送在http://my.oschina.net/u/2340880/blog/405491这篇博客中有详细的介绍,这里主要讨论远 ...
- vs2017 rc 离线安装包制作
vs2017 rc 离线安装包制作 1.下载在线安装包:https://aka.ms/vs/15/release/vs_Enterprise.exe 2.制作离线安装包: vs_Enterprise. ...
- RedisUtil 工具类
package com.test; import redis.clients.jedis.Jedis; import redis.clients.jedis.JedisPool; import red ...
- 43. Multiply Strings
/** * @param {string} num1 * @param {string} num2 * @return {string} */ var multiply = function(num1 ...