章节
问答
课签
笔记
评论
占位
占位

canvas飘雪(下)

右边的代码snowflake.js是完成的雪花代码,初学者可能会有点难度,尝试着慢慢理解下。在canvas飘雪(中)的基础上增加了运动的一个算法,然后把整个结构给规整了下。

入口是Snowflake函数,流程如下:

  1. 获取canvas节点,并设置容器尺寸
  2. initSnow方法创建雪球对象,保存在snowArrObjs容器中
  3. 创建render与update方法,主要是用来创建雪花并更新雪花的坐标
  4. 引入requestAnimationFrame方法,刷新雪花

雪球的变化会有一系列的参数设置,这里会用initSnow函数完成这个默认的参数选择,并增加了速率等参数设置。

雪球的坐标变化update方法:

Y轴:

this.y += this.speedY;
if (this.y > this.snowSettings.maxY) {
    this.y -= this.snowSettings.maxY;
}

this.speedY是一个增量,每次都叠加赋予,如果溢出后就会还原

X轴:

this.angle += this.speedX;
if (this.angle > Math.PI * 2) {
    this.angle -= Math.PI * 2;
}
this.x = this.initialX + this.moveX * Math.sin(this.angle);

X轴的变化是有个左右移动的,所以这里回用正玄值来计算左右的位移

移动:

在renderAndUpdate方法中,通过不断的调用requestAnimationFrame达到不断刷新雪球的坐标,感觉上雪球是不断在飘落

var renderAndUpdate = function() {
    render();
    update();
    requestAnimationFrame(renderAndUpdate);
}

任务

在snowflake.js文件141行处填入任务代码

计算出雪飘在x轴坐标中移动的距离

?不会了怎么办

this.x = this.initialX + this.moveX * Math.sin(this.angle);

||

提问题

写笔记

公开笔记
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最热 最新
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?