認識canvas（畫扇形動態畫圓弧（requestAnimationFrame結合settimeo

airborne007 發布于2019-08-23 16:56 / 2080人閱讀

摘要：最近做的兩個項目都是關于的，做完整理一下，方便下一次使用，在里寫的小，功能畫扇形動態畫圓弧結合做的動畫畫表盤創建一個對象方法開始畫筆設置填充顏色是順時針是逆時針默認是逆時針結束畫筆開始填充沒有直接創建一個對象方法開始畫筆設置填充顏色是順時針

最近做的兩個項目都是關于canvas的，做完整理一下，方便下一次使用，在vue里寫的小demo，
功能：畫扇形動態畫圓弧（requestAnimationFrame結合settimeout做的動畫）、畫表盤
1、創建一個ctx對象

    2、begain()方法開始畫筆
    3、fillStyple設置填充顏色  [strokeStyle]
    4、arc(x,y,r,startAngle,endAngle,direction)  true是順時針 false是逆時針  默認是逆時針
    5、closePath()結束畫筆 開始填充fill() [沒有closePah直接stroke()]

mounted () {
    this.$nextTick(() => {
      /*
        1、創建一個ctx對象
        2、begain()方法開始畫筆
        3、fillStyple設置填充顏色  [strokeStyle]
        4、arc(x,y,r,startAngle,endAngle,direction)  true是順時針 false是逆時針  默認是逆時針
        5、closePath()結束畫筆 開始填充fill() [沒有closePah直接stroke()]
      */
      // 封裝畫扇形
      let ctx = this.$refs.can01.getContext("2d")
      this.drawFanShapes(ctx, 400, 400, 0, 0, 150, "red", false)
      this.drawFanShapes(ctx, 400, 400, 0, 120, 200, "green", false)
      // 動態畫圓弧
      let ctx02 = this.$refs.can02.getContext("2d")
      this.drawArc(ctx02, 400, 400, 100, 0, 360, "#ffffd", 10, "round", false)
      let globalAni = null
      let endAngle = 0
      let _self = this
      function animate () {
        let timer = setTimeout(() => {
          globalAni = requestAnimationFrame(animate)
          if (endAngle < 270) {
            endAngle += 10
            _self.drawArc(ctx02, 400, 400, 100, 0, endAngle, "green", 10, "round", false)
          } else {
            clearTimeout(timer)
            cancelAnimationFrame(globalAni)
          }
        }, 20)
      }
      globalAni = requestAnimationFrame(animate)
      // 畫時鐘表盤
      let ctx03 = this.$refs.can03.getContext("2d")
      this.drawClock(ctx03, 200, 200, 60, -180 - 160, 1, "red")
    })
  },
  methods: {
    // 畫表刻度（ctx,x,y,刻度數，startX, endY,lineWidth, strokeColor）
    drawClock (ctx, x, y, num, startX, endY, lineWidth, strokeColor) {
      for (let i = 0; i < 60; i++) {
        ctx.save()
        ctx.lineWidth = 1
        ctx.strokeStyle = "red"
        ctx.translate(200, 200)
        ctx.rotate(6 * i * Math.PI / 180)
        ctx.beginPath()
        ctx.moveTo(0, -180)
        ctx.lineTo(0, -160)
        ctx.stroke()
        ctx.restore()
      }
    },
    // 畫扇形(ctx,width，height，半徑[0自動算半徑]，開始角度，結束角度，填充顏色，方向)
    drawArc (ctx, width, height, radius, startAngle, endAngle, strokeColor, lineWidth, round, direction) {
      ctx.save()
      let basic = {
        x: width / 2,
        y: height / 2,
        r: (!radius) ? (width - lineWidth) / 2 : radius,
        startAngle: (startAngle / 180) * Math.PI,
        endAngle: (endAngle / 180) * Math.PI,
        direction: direction || false
      }
      ctx.beginPath()
      ctx.strokeStyle = strokeColor
      ctx.lineWidth = lineWidth
      ctx.arc(basic.x, basic.y, basic.r, basic.startAngle, basic.endAngle, direction)
      ctx.lineCap = round
      ctx.stroke()
      ctx.restore()
    },
    // 畫圓弧(ctx,x，y，半徑[0自動算半徑]，開始角度，結束角度，畫的顏色，是否圓角，方向)
    drawFanShapes (ctx, width, height, radius, startAngle, endAngle, fillColor, direction) {
      let basic = {
        x: width / 2,
        y: height / 2,
        r: (!radius) ? width / 2 : radius,
        startAngle: (startAngle / 180) * Math.PI,
        endAngle: (endAngle / 180) * Math.PI,
        direction: direction || false
      }
      ctx.beginPath()
      ctx.fillStyle = fillColor
      ctx.moveTo(basic.x, basic.y)
      ctx.arc(basic.x, basic.y, basic.r, basic.startAngle, basic.endAngle, direction)
      ctx.closePath()
      ctx.fill()
    }
  }

云服務器 GPU云服務器畫矩形畫曲線畫圓環畫圓角

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103547.html

認識canvas（畫扇形動態畫圓弧（requestAnimationFrame結合settimeo

摘要：最近做的兩個項目都是關于的，做完整理一下，方便下一次使用，在里寫的小，功能畫扇形動態畫圓弧結合做的動畫畫表盤創建一個對象方法開始畫筆設置填充顏色是順時針是逆時針默認是逆時針結束畫筆開始填充沒有直接創建一個對象方法開始畫筆設置填充顏色是順時針最近做的兩個項目都是關于canvas的，做完整理一下，方便下一次使用，在vue里寫的小demo，功能：畫扇形動態畫圓弧（requestAnima...

xietao3 2019-08-26 13:42 評論0 收藏0
circle_clock 簡單canvas實現圓弧時鐘

摘要：渣渣成品圖最近對于圓形有種特別的感情呢因為寫了個就像到了用來做時鐘大概會比較有趣吧所以就著手寫了個這樣的一個東西大概代碼上錯漏還是蠻多的接下來分享下關于如何開發一個圓形時鐘條吧使用這次就沒有采用的方法來實現圓環了因為我想要做多層嵌套的圓環覺渣渣成品圖:http://codepen.io/thewindswor... 最近對于圓形有種特別的感情呢...因為寫了個cricle_proce...

boredream 2019-08-29 11:18 評論0 收藏0
circle_clock 簡單canvas實現圓弧時鐘

摘要：渣渣成品圖最近對于圓形有種特別的感情呢因為寫了個就像到了用來做時鐘大概會比較有趣吧所以就著手寫了個這樣的一個東西大概代碼上錯漏還是蠻多的接下來分享下關于如何開發一個圓形時鐘條吧使用這次就沒有采用的方法來實現圓環了因為我想要做多層嵌套的圓環覺渣渣成品圖:http://codepen.io/thewindswor... 最近對于圓形有種特別的感情呢...因為寫了個cricle_proce...

寵來也 2019-08-01 15:42 評論0 收藏0
circle_clock 簡單canvas實現圓弧時鐘

摘要：渣渣成品圖最近對于圓形有種特別的感情呢因為寫了個就像到了用來做時鐘大概會比較有趣吧所以就著手寫了個這樣的一個東西大概代碼上錯漏還是蠻多的接下來分享下關于如何開發一個圓形時鐘條吧使用這次就沒有采用的方法來實現圓環了因為我想要做多層嵌套的圓環覺渣渣成品圖:http://codepen.io/thewindswor... 最近對于圓形有種特別的感情呢...因為寫了個cricle_proce...

paney129 2019-08-22 10:38 評論0 收藏0
canvas && CSS 兩種實現儀表盤的方式

摘要：先上效果圖這種圖形大家應該都見過，俗稱儀表盤，當然，上圖只是個最基本的儀表盤架子，可能在實際場景中還會其他很多花里胡哨的點綴，那些暫且不管，不是關鍵，這東西經常見到，但還沒親自上手在代碼層面實現過，最近做的一個需求恰好有這個場景，這里歸先上效果圖： showImg(https://user-gold-cdn.xitu.io/2019/5/23/16ae28a94cb51d3e); 這種圖形大...

番茄西紅柿 2019-05-23 15:55 評論0 收藏0