Canvas学习笔记(二)—— 绘制2D宇宙星轨


参考资料

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状态

文章作者: Susie Chang
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Susie Chang !
 上一篇
知识图谱-从构建到呈现 知识图谱-从构建到呈现
参考资料 Apache Jena 基于 REfO 的 KBQA 实现及示例 知识图谱-给AI装个大脑 技术路线 构建实体概念 工具:Protégé 构建三元组数据库TDB 数据采集:爬虫基础(百度百科,去哪儿网,etc) Apach
2018-11-05
下一篇 
Canvas学习笔记(一) Canvas学习笔记(一)
参考资料 《JavaScript高级程序设计》 基本用法 坐标轴 指定绘图区域大小<canvas id="drawing" width="200" height="200"> your broswer is not supporti
2018-11-01
  目录