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
dddd
但我想让一开始的时候,不要一下子全都出来,
结束的时候,也不要一下子全部消失.
有点晚了,
我的思路是,
创建雪花时,不要一次创建50个,
而是一次创建5个
每次计时器判断 数组的长度小于50个
就又创建5个
我们在构造函数中,定义另一个render
点击结束按钮时, 启动该render,该render在雪花飘出边界时,
不会从新运行 init() 回到顶边.
而是,修改该对象的一个变量, 比如end? 为 true;
在snowarr 在结束按钮中的循环中,如果发现该 值为true,
则从数组中排除,
当数组长度为0 时, 完全停止计时器.
如果我们重新启动,
则我们在循环时, 给每个end 重新赋值 false;
大概这么个思路.
明天再说.
妈呀, 我这表达能力还真的有待提高,
这写的什么啊,
完全看不懂..
先放到github上