image.png
image.png
javascript三角函数的使用
我只读了一点三角函数的基本用法.
版本1.0 这是有明显缺陷的.
// 绘制雪花
// 清空画布, 来更新
// 如何移动位置?
// 如何进行旋转?
// 雪花的基本参数, 中心坐标, 长度, 角度
// 画布
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");
// 一个雪花的创建.
var createsnow = (function () {
return function (x,y,deg,r) {
ctx.moveTo(x,y);
// 六个边 怎么画比较好?
// 需要一点数学知识.
// 需要根据 角度和长度把 坐标求出来.
// 读数和弧度单位换算.
// 360 = 2 * Math.PI
// x / 360 = y / 2 / Math.Pi
// 已知 x 求 y
// y = x/180 * Math.Pi
// 我这说的也挺费劲的...
var ddd = deg/180 * Math.PI;
var x1 = x + Math.cos(ddd) * r;
var y1 = y + Math.sin(ddd) * r;
var x2 = x - Math.cos(ddd) * r;
var y2 = y - Math.sin(ddd) * r;
var x3 = x + Math.cos(ddd + (Math.PI/3)) * r;
var y3 = y + Math.sin(ddd + (Math.PI/3)) * r;
var x4 = x - Math.cos(ddd + (Math.PI/3)) * r;
var y4 = y - Math.sin(ddd + (Math.PI/3)) * r;
var x5 = x + Math.cos(ddd - (Math.PI/3)) * r;
var y5 = y + Math.sin(ddd - (Math.PI/3)) * r;
var x6 = x - Math.cos(ddd - (Math.PI/3)) * r;
var y6 = y - Math.sin(ddd - (Math.PI/3)) * r;
// 根据 坐标 画出线条.
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.closePath();
ctx.lineTo(x3,y3);
ctx.lineTo(x4,y4);
ctx.closePath();
ctx.lineTo(x5,y5);
ctx.lineTo(x6,y6);
ctx.closePath();
ctx.lineWidth = 5;
ctx.strokeStyle = "white";
ctx.stroke();
}
})();
// 让一个雪花完整的动画
// createsnow(100,100,30,30);
function move () {
var x =Math.random() * 500;
var y = 0;
var r = Math.random() * 15 + 5;
var deg = parseInt(Math.random() * 360);
var speedx = Math.random() > 0.5 ? Math.random() * 5 + 2 : - Math.random() * 5 + 2;
var speedy = Math.random() * 5 + 2;
var timer = setInterval(function () {
x += speedx;
y += speedy;
deg++;
ctx.clearRect(0,0,500,500);
createsnow(x,y,deg,r);
if (x < -r || x > 500+r || y > 500 + r) {
clearInterval(timer);
}
},50);
}
move();
// 让多个雪花完整的动画.
setInterval(function () {
move();// 因为每个 move 执行时 都会 clearRect, 所以画面不堪入目
},100)
版本2.0
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewprot" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>dddd</title>
<link rel="stylesheet" type="text/css" href="css/test.css" />
<style type="text/css">
canvas{
margin: 100px 200px;
border: 1px solid black;
background-color: #000;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<button onclick="stop()">stop</button>
<button onclick="move()">start</button>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
// 一条路径
// 落笔
// 绘制雪花
// 清空画布, 来更新
// 如何移动位置?
// 如何进行旋转?
// 雪花的基本参数, 中心坐标, 长度, 角度
// 画布
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");
// 一个雪花的创建.
var createsnow = (function () {
return function (x,y,deg,r) {
ctx.moveTo(x,y);
// 六个边 怎么画比较好?
// 需要一点数学知识.
// 需要根据 角度和长度把 坐标求出来.
// 读数和弧度单位换算.
// 360 = 2 * Math.PI
// x / 360 = y / 2 / Math.Pi
// 已知 x 求 y
// y = x/180 * Math.Pi
// 我这说的也挺费劲的...
var ddd = deg/180 * Math.PI;
var x1 = x + Math.cos(ddd) * r;
var y1 = y + Math.sin(ddd) * r;
var x2 = x - Math.cos(ddd) * r;
var y2 = y - Math.sin(ddd) * r;
var x3 = x + Math.cos(ddd + (Math.PI/3)) * r;
var y3 = y + Math.sin(ddd + (Math.PI/3)) * r;
var x4 = x - Math.cos(ddd + (Math.PI/3)) * r;
var y4 = y - Math.sin(ddd + (Math.PI/3)) * r;
var x5 = x + Math.cos(ddd - (Math.PI/3)) * r;
var y5 = y + Math.sin(ddd - (Math.PI/3)) * r;
var x6 = x - Math.cos(ddd - (Math.PI/3)) * r;
var y6 = y - Math.sin(ddd - (Math.PI/3)) * r;
// 根据 坐标 画出线条.
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.closePath();
ctx.lineTo(x3,y3);
ctx.lineTo(x4,y4);
ctx.closePath();
ctx.lineTo(x5,y5);
ctx.lineTo(x6,y6);
ctx.closePath();
ctx.lineWidth = 5;
ctx.strokeStyle = "white";
ctx.stroke();
}
})();
// 让一个雪花完整的动画
// createsnow(100,100,30,30);
function SnowData () {
this.init = function () {
this.x =Math.random() * 500;
this.y = 0;
this.r = Math.random() * 15 + 5;
this.deg = parseInt(Math.random() * 360);
this.speedx = Math.random() > 0.5 ? Math.random() * 5 + 2 : - Math.random() * 5 + 2;
this.speedy = Math.random() * 5 + 2;
}
this.render = function () {
this.x += this.speedx;
this.y += this.speedy;
this.deg++;
createsnow(this.x,this.y,this.deg,this.r);
if (this.x < -this.r || this.x > 500+this.r || this.y > 500 + this.r) {
this.init();
}
}
this.init();
createsnow(this.x,this.y,this.deg,this.r);
}
function move () {
// 创建多个雪花
// 使用for循环.
// 清空之后,
// 必须让他们各自按照自己的数据进行更新.
// 所以最好是用面向对象的方式?
// 创建50个雪花
if (!move.flag) {// 这个flag 是用来防止多次开启计时器
var snowArr = [];
for(var i = 0; i < 50; i++) {
snowArr.push(new SnowData());
}
move.timer = setInterval(function () {
ctx.clearRect(0,0,500,500);
snowArr.forEach(function (item) {
item.render();
});
},50);
move.flag = true;
}
}
move();
function stop () {
clearInterval(move.timer);
ctx.clearRect(0,0,500,500);
move.flag = false;
}
</script>
</body>
</html>
但我想让一开始的时候,不要一下子全都出来,
结束的时候,也不要一下子全部消失.
有点晚了,
我的思路是,
创建雪花时,不要一次创建50个,
而是一次创建5个
每次计时器判断 数组的长度小于50个
就又创建5个
我们在构造函数中,定义另一个render
点击结束按钮时, 启动该render,该render在雪花飘出边界时,
不会从新运行 init() 回到顶边.
而是,修改该对象的一个变量, 比如end? 为 true;
在snowarr 在结束按钮中的循环中,如果发现该 值为true,
则从数组中排除,
当数组长度为0 时, 完全停止计时器.
如果我们重新启动,
则我们在循环时, 给每个end 重新赋值 false;
大概这么个思路.
明天再说.
妈呀, 我这表达能力还真的有待提高,
这写的什么啊,
完全看不懂..
先放到github上
网友评论