|   157(字)

canvas绘制闪烁星星效果

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/

AlexZ33 wechat
扫码订阅公众号
如果文章对您有用请随意打赏,谢谢支持!