认识canvas（画扇形动态画圆弧（requestAnimationFrame结合settimeo

xietao3 发布于2019-08-26 13:42 / 3274人阅读

摘要：最近做的两个项目都是关于的，做完整理一下，方便下一次使用，在里写的小，功能画扇形动态画圆弧结合做的动画画表盘创建一个对象方法开始画笔设置填充颜色是顺时针是逆时针默认是逆时针结束画笔开始填充没有直接创建一个对象方法开始画笔设置填充颜色是顺时针

最近做的两个项目都是关于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云服务器云服务器画矩形画曲线画圆环画圆角

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109358.html

认识canvas（画扇形动态画圆弧（requestAnimationFrame结合settimeo

摘要：最近做的两个项目都是关于的，做完整理一下，方便下一次使用，在里写的小，功能画扇形动态画圆弧结合做的动画画表盘创建一个对象方法开始画笔设置填充颜色是顺时针是逆时针默认是逆时针结束画笔开始填充没有直接创建一个对象方法开始画笔设置填充颜色是顺时针最近做的两个项目都是关于canvas的，做完整理一下，方便下一次使用，在vue里写的小demo，功能：画扇形动态画圆弧（requestAnima...

airborne007 2019-08-23 16:56 评论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