为了账号安全,请及时绑定邮箱和手机立即绑定

canvas实现星星闪烁特效

难度中级
时长 1小时15分
学习人数
综合评分9.53
70人评价 查看评价
9.7 内容实用
9.5 简洁易懂
9.4 逻辑清晰
我这也不支持requestAnimFrame,写成requestAnimationFrame就可以了
小瑕疵:星星超出一个自身高宽身位时,才会重生,这个跟用this.x和this.y来判断有关,可以有更好的解决方案,比如判断时加上自己的高宽。。。。。。。。。。同上一集,写评论的时候没有自己写代码验证,错了的话,希望大家包涵下。。。。。。最近在写个小游戏,感谢老师给了我很多启发和思路,感谢!
有一个可以改进的小地方:星星图片有7帧,第一帧和第七帧是一样的,星星闪到最后一帧时最小,然后循环,从第一帧开始闪,又是最小,相当于有两次连续处于最小的状态,所以仔细看图片,是会有星星卡顿一下的感觉,在循环的时候,改为picNo %=6就可以了,这样就不会出现细微的卡顿。。。。。。。。。。。。然后我写这段评论的时候并没有写代码验证,错了的话,别喷我。。。
挺好的。但是只能跟着照着敲。
为什么总是下载失败,未发现文件
有点懵逼。。。。。。。。。。
老师逻辑很清楚,讲得很棒!

最新回答 / 慕沐8008451
你是不是找的素材棠,www.sucait.cn,你可以去看看
图片找不到啊
谢谢老师的分享
是不是觉得整个任务都很简单?是的
if(deltaTime){
this.timer += deltaTime
}

最新回答 / 梧桐_细雨
我好像知道为什么图片模糊了,canvas里的宽高不要用样式去控制,要写在 <canvas id="canvas"  width="800" height="600">      您的浏览器不支持canvas哦!    </canvas>因为这里的宽是canvas本身的属性,而不是样式宽的属性;
背景图片感觉不需要一直重绘,老师要稍微优化一下吧
课程须知
1、具有HTML、CSS基础知识 2、具有JavaScript基础知识(函数、类、对象) 3、具有一些Canvas基础(画线、弧线、圆)
老师告诉你能学到什么?
1、如何轮播一张图片上的序列帧 2、canvas的几个主要绘图API:drawImage()、save()、restore()。 3、如何处理鼠标事件 4、如何化繁为简的做项目

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消