認(rèn)識(shí)canvas（畫(huà)扇形動(dòng)態(tài)畫(huà)圓弧（requestAnimationFrame結(jié)合settimeo

xietao3 發(fā)布于2019-08-26 13:42 / 3319人閱讀

摘要：最近做的兩個(gè)項(xiàng)目都是關(guān)于的，做完整理一下，方便下一次使用，在里寫(xiě)的小，功能畫(huà)扇形動(dòng)態(tài)畫(huà)圓弧結(jié)合做的動(dòng)畫(huà)畫(huà)表盤(pán)創(chuàng)建一個(gè)對(duì)象方法開(kāi)始畫(huà)筆設(shè)置填充顏色是順時(shí)針是逆時(shí)針默認(rèn)是逆時(shí)針結(jié)束畫(huà)筆開(kāi)始填充沒(méi)有直接創(chuàng)建一個(gè)對(duì)象方法開(kāi)始畫(huà)筆設(shè)置填充顏色是順時(shí)針

最近做的兩個(gè)項(xiàng)目都是關(guān)于canvas的，做完整理一下，方便下一次使用，在vue里寫(xiě)的小demo，
功能：畫(huà)扇形動(dòng)態(tài)畫(huà)圓弧（requestAnimationFrame結(jié)合settimeout做的動(dòng)畫(huà)）、畫(huà)表盤(pán)
1、創(chuàng)建一個(gè)ctx對(duì)象

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

mounted () {
    this.$nextTick(() => {
      /*
        1、創(chuàng)建一個(gè)ctx對(duì)象
        2、begain()方法開(kāi)始畫(huà)筆
        3、fillStyple設(shè)置填充顏色  [strokeStyle]
        4、arc(x,y,r,startAngle,endAngle,direction)  true是順時(shí)針 false是逆時(shí)針  默認(rèn)是逆時(shí)針
        5、closePath()結(jié)束畫(huà)筆 開(kāi)始填充fill() [沒(méi)有closePah直接stroke()]
      */
      // 封裝畫(huà)扇形
      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)
      // 動(dòng)態(tài)畫(huà)圓弧
      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)
      // 畫(huà)時(shí)鐘表盤(pán)
      let ctx03 = this.$refs.can03.getContext("2d")
      this.drawClock(ctx03, 200, 200, 60, -180 - 160, 1, "red")
    })
  },
  methods: {
    // 畫(huà)表刻度（ctx,x,y,刻度數(shù)，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()
      }
    },
    // 畫(huà)扇形(ctx,width，height，半徑[0自動(dòng)算半徑]，開(kāi)始角度，結(jié)束角度，填充顏色，方向)
    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()
    },
    // 畫(huà)圓弧(ctx,x，y，半徑[0自動(dòng)算半徑]，開(kāi)始角度，結(jié)束角度，畫(huà)的顏色，是否圓角，方向)
    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()
    }
  }

云服務(wù)器 GPU云服務(wù)器畫(huà)矩形畫(huà)曲線畫(huà)圓環(huán) 畫(huà)圓角

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/109358.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

xietao3

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

BREW 應(yīng)用的測(cè)試簽名

閱讀 1634·2021-11-22 14:45
5G時(shí)代的邊緣計(jì)算丨文末贈(zèng)書(shū)

閱讀 1088·2021-11-17 09:33
金融科技行業(yè)網(wǎng)絡(luò)安全威脅概覽

閱讀 3334·2021-09-02 09:48
px、em和rem實(shí)戰(zhàn)經(jīng)驗(yàn)

閱讀 979·2019-08-30 15:54
理解瀏覽器是如何加載及渲染網(wǎng)頁(yè)的

閱讀 2778·2019-08-30 15:53
前端學(xué)習(xí)筆記（CSS、JS基礎(chǔ)篇）

閱讀 2566·2019-08-30 12:54
PHP學(xué)習(xí)路線圖

閱讀 2253·2019-08-29 12:37
個(gè)人理解瀏覽器的工作原理

閱讀 2431·2019-08-26 13:58

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

認(rèn)識(shí)canvas（畫(huà)扇形動(dòng)態(tài)畫(huà)圓弧（requestAnimationFrame結(jié)合settimeo

相關(guān)文章