canvas学习——第四天

canvas学习——第四天

canvas太阳系
研究了一下canvas太阳系，总结一下…
暂时用了几张图片来代替一下地球和月球，之后再进行优化，大致是这样的：

我是在vue项目上面使用的，先说一下使用时出现的一些问题：
首先是在canvas上使用图片时不显示图片，开始我是这样写的：

可以看到已经是读取到地址了，但是就是不显示，就很烦，但是如果是static的路径时会正常读取到，后来百度找到路径这样写：

这样会正常显示图片，具体的原因好像是webpack打包问题，读取assets里的图片时需要require。
好了，直接上代码：

universe() {
      const canvas = document.getElementById('canvas') // 获取canvas
      const ctx = canvas.getContext('2d')
      canvas.width = 300
      canvas.height = 300
      const sun = new Image()
      sun.src = this.sun
      const earth = new Image()
      earth.src = this.earth
      const moon = new Image()
      moon.src = this.moon
      ctx.clearRect(0, 0, 300, 300) // 清空所有的内容
      // 绘制太阳
      ctx.drawImage(sun, 0, 0, 300, 300)
      ctx.save()
      //修改坐标原点到（150，,150）
      ctx.translate(150, 150)
      // 绘制earth轨道
      ctx.beginPath()
      ctx.strokeStyle = 'rgba(255,255,0,0.5)'
      ctx.arc(0, 0, 100, 0, 2 * Math.PI)
      ctx.stroke()
      const time = new Date()
      // 绘制地球
      ctx.rotate(2 * Math.PI / 60 * time.getSeconds() + 2 * Math.PI / 60000 * time.getMilliseconds())
       //修改坐标原点到（100,0）
      ctx.translate(100, 0)
      ctx.drawImage(earth, -12, -12, 24, 24)
      // 绘制月球轨迹
      ctx.beginPath()
      ctx.strokeStyle = 'rgba(255,255,255,.3)'
      ctx.arc(0, 0, 40, 0, 2 * Math.PI)
      ctx.stroke()
      // 绘制月球
      ctx.rotate(2 * Math.PI / 6 * time.getSeconds() + 2 * Math.PI / 6000 * time.getMilliseconds())
      //修改坐标原点到（40,0）
      ctx.translate(40, 0)
      ctx.drawImage(moon, -10, -10, 20, 20)
      ctx.restore()
	 //重复运行
      requestAnimationFrame(this.universe)
    }

具体的就是每次绘制一个新的星体时就重新修改坐标原点，然后根据时间来决定每一秒时该星体偏移多少度就好。