canvas绘制闪烁星星效果
GitHub:https://github.com/AlexZ33/canvas_demo/tree/gh-pages
演示链接
主要知识点
- 如何轮播序列帧
- canvas API
- drawImage();
- globalAlpha;
- Save;
- Restore
- 如何添加鼠标事件
- 循环调用 Window API
-requestAnimFrame(function(){});
-setTimeout(function(){},time);
-setInterval(function(){},time);
三者的区别
总体思路
- 搭建网页结构
- 绘制背景
- 绘制女孩图片
- 鼠标点画圆闪烁变动,以及连线其他原点
- requestAnimationFrame 更新画面
参考:
慕课网 canvas实现星星闪烁特效
GameLoop的几种实现方式
Javascript中的setTimeout,setInterval,requestAnimFrame
[Request Animation Frame for Better Performance]https://software.intel.com/en-us/html5/hub/blogs/request-animation-frame-for-better-performance/