Canvas学习笔记(二)

参考资料

Canvas学习笔记(一)

效果图

分析

  • 确定画布中不动的元素:中心的星球,轨道
  • 确定画布中移动的元素:绕中心星球旋转的行星
  • 旋转用到的变换操作:rotate(弧度), 旋转变换速度函数:使用匀速旋转
  • 确定最大半径,确定轨道条数

canvas操作

  • 绘制一个圆形:使用arc绘制圆形路径,使用fill填充路径
  • save和restore可以保存和恢复上下文的设置和变换到栈结构

代码

  • 画不动的元素
    const circleRadius = [245, 220, 195, 170, 145, 120, 95, 70];
    const radius = 250;
    function drawStaticContext(cxt) {
    cxt.save();
    cxt.strokeStyle="#6D819C"
    cxt.lineWidth="1"
    circleRadius.forEach( function(element, index) {
      cxt.beginPath();
      cxt.arc(radius, radius, element, 0, 2 * Math.PI, false);
      cxt.closePath();
      cxt.stroke();
    });
    cxt.fillStyle="#F9D423";
    cxt.shadowColor="#FC913A";
    cxt.shadowBlur = 45;
    cxt.beginPath();
    cxt.arc(radius, radius, 30, 0, 2 * Math.PI, false);
    cxt.closePath();
    cxt.fill();
    cxt.restore();
    }
    
  • 定时执行的函数
    function run(cxt) {
    cxt.clearRect(0, 0, 500, 500);
    cxt.save();
    drawStaticContext(cxt);
    cxt.translate(radius, radius);
    cxt.fillStyle="#C89EC4";
    circleRadius.forEach(function(element, index) {
      var angle = time / 10;
      cxt.rotate(angle * (Math.PI/180));
      cxt.beginPath();
      cxt.arc(0, element, 5, 0, 2*Math.PI, false);
      cxt.closePath();
      cxt.fill();
    });
    time+=1;
    cxt.restore();
    }
    
  • 调用
    var canvas = document.getElementById("canvas");
    if(canvas.getContext) {
    var context = canvas.getContext("2d");
    drawStaticContext(context);
    setInterval(function () {
      run(context);
    }, 50);
    }
    

    知识点总结

  • 动画的基本步骤:
    • 清空canvas:clearRect
    • 保存canvas状态:如果要改变一些会改变canvas状态的设置(样式,变形之类),又要在每帧之前恢复原始状态
    • 绘制动画图形
    • 恢复canvas状态

  转载请注明: Blog Canvas学习笔记(二)

 上一篇
手动实现Vue的MVVM框架 手动实现Vue的MVVM框架
Vue源码是用TypeScript写的,本文采用ES6写法逐步实现MVVM框架,以理清双向绑定的过程。代码参考姜文老师的公开课 分析数据双向绑定的过程可以分成两个过程:① 数据变化渲染到页面;② 页面操作(input/textarea等
2018-10-25
下一篇 
Canvas学习笔记(一) Canvas学习笔记(一)
参考资料 《JavaScript高级程序设计》 基本用法 坐标轴 指定绘图区域大小<canvas id="drawing" width="200" height="200"> your broswer is not supporti
2018-10-23
  目录