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

canvas飘雪(上)

圣诞主题针对飘雪的进一步升级,采用比较时髦的canvas实现。这里我将一步一步分析这个飘雪的实现步骤,看是挺复杂的,真正理解了其实也就那么一回事。

我的分解步骤是这样的:单个雪花的实现=》多个雪花的随机布局=》雪花运动的算法=》雪花类的封装

单个雪花的实现

参考右边的代码区域snowflake.js与效果区域的一个圆形的图形。对的,就是一个大圆形,这是便于大家观察所以特意放大了。缩小后就小雪花了,嘿嘿!!!

代码很简单,通过canvas提供的方法画出一个圆形就可以了,参考snowflake.js文件。canvas中有一个act方法,arc的作用是画一个正规的圆弧,可以是一个完整的圆,也可以是一个圆的某一段弧线。

arc的语法如下:arc(圆心x,圆心y,半径,开始的角度,结束的角度,是否逆时针)。

context.arc(x, y, radius, startAngle, endAngle, anticlockwise)

如果我们用arc画一个完整的圆,该怎么搞?大家注意到参数中有个开始角度与结束角度,如果我们开始角度是0,结束角度是360,不就是个正圆了? 正解!但要注意的是,这里的角度是用“弧度”来表示的(Flash也是如此),一个完整的圆即360度,就是2PI弧度。

arc也是画的路径,所以我们要在他后面调用填充或描边的方法才能显出图形(代码中采用了RBG的白色fillStyle与透明度填充)。

最后要记得加beginPath与closePath了,因为canvas中的绘制方法(如stroke,fill),都会以“上一次beginPath”之后的所有路径为基础进行绘制。加上这个是为了开辟一个新的路径。总而言之,就是不要企图通过闭合现有路径来开始一条新路径,而开始一条新路径,以前的路径也不会闭合。

最后的效果参考右边的代码区域,通过arc画圆形,fillStyle填充颜色与透明度,beginPath与closePath规划一个新的路径,通过fill方法让fillStyle 属性所指定的颜色、渐变和模式来填充当前路径。

任务

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

定义一个圆弧,大小是100,半径是50,角度是360,逆时针旋转

?不会了怎么办

 canvasContext.arc(100, 100, 50, 0, Math.PI * 2, true);

||

提问题

写笔记

公开笔记
提交
||

请验证,完成请求

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

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

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

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

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

举报

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

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?