html雪花飘落计划书,5.html5 作业 canvas 雪花飘落

image.png

image.png

我只读了一点三角函数的基本用法.

版本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

canvas{

margin: 100px 200px;

border: 1px solid black;

background-color: #000;

}

stop

start

// 一条路径

// 落笔

// 绘制雪花

// 清空画布, 来更新

// 如何移动位置?

// 如何进行旋转?

// 雪花的基本参数, 中心坐标, 长度, 角度

// 画布

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;

}

但我想让一开始的时候,不要一下子全都出来,

结束的时候,也不要一下子全部消失.

有点晚了,

我的思路是,

创建雪花时,不要一次创建50个,

而是一次创建5个

每次计时器判断 数组的长度小于50个

就又创建5个

我们在构造函数中,定义另一个render

点击结束按钮时, 启动该render,该render在雪花飘出边界时,

不会从新运行 init() 回到顶边.

而是,修改该对象的一个变量, 比如end? 为 true;

在snowarr 在结束按钮中的循环中,如果发现该 值为true,

则从数组中排除,

当数组长度为0 时, 完全停止计时器.

如果我们重新启动,

则我们在循环时, 给每个end 重新赋值 false;

大概这么个思路.

明天再说.

妈呀, 我这表达能力还真的有待提高,

这写的什么啊,

完全看不懂..

先放到github上