mini-program-svg/pages/canvas/index.js

Page({
  data:{
    sf:0
  },
  onLoad() {
    const query = wx.createSelectorQuery()
    query.select('#myCanvas')
      .fields({
        node: true,
        size: true
      })
      .exec((res) => {
        const canvas = res[0].node
        canvas.width = res[0].width
        canvas.height = res[0].height
        const ctx = canvas.getContext('2d');
        // 缩放率=》实际隧道宽度1264，后台有传?
        // 为居中减少宽度10
        const cw = res[0].width-10
        const sw = cw / 1264
        this.setData({
          sf:sw
        })
        /** 炮孔示意图  start */
        // 画弧=>需要后台传每个圆弧的半径+起始弧度
        ctx.beginPath()
        ctx.arc(...this.drawArc(632,cw,Math.PI,2*Math.PI))
        ctx.stroke()

        ctx.beginPath()
        ctx.arc(...this.drawArc(400,cw,Math.PI,2*Math.PI))
        ctx.stroke()

        // 画炮孔=》后台传坐标
        ctx.beginPath()
        ctx.arc(...this.drawPi(0,632))
        ctx.stroke()

        ctx.beginPath()
        ctx.arc(...this.drawPi(632,632))
        ctx.stroke()

        ctx.beginPath()
        ctx.arc(...this.drawPi(1264,632))
        ctx.stroke()

        ctx.beginPath()
        ctx.arc(...this.drawPi(500,632))
        ctx.stroke()   
        
        ctx.beginPath()
        ctx.arc(...this.drawPi(500,500))
        ctx.stroke()   

        // 直线=》后台传坐标
        ctx.moveTo(...this.drawLine(500,632))
        ctx.lineTo(...this.drawLine(500,500))
        ctx.stroke()
        /** 炮孔示意图 end */

        /** 炮孔俯视图 start*/
        ctx.moveTo(...this.drawLine(50,800))
        ctx.lineTo(...this.drawLine(65,1100))
        ctx.stroke()

        ctx.moveTo(...this.drawLine(200,800))
        ctx.lineTo(...this.drawLine(200,1100))
        ctx.stroke()

        ctx.moveTo(...this.drawLine(300,800))
        ctx.lineTo(...this.drawLine(300,1100))
        ctx.stroke()

        ctx.moveTo(...this.drawLine(400,800))
        ctx.lineTo(...this.drawLine(400,1100))
        ctx.stroke()

        ctx.moveTo(...this.drawLine(700,800))
        ctx.lineTo(...this.drawLine(500,1100))
        ctx.stroke()

        ctx.moveTo(...this.drawLine(50,1100))
        ctx.lineTo(...this.drawLine(1200,1100))
        ctx.stroke()
      })
  },
  /**
   * 画圆弧s
   * @param {*} arcR 圆弧实际半径
   * @param {*} cw  canvas 宽度
   * @param {*} sPi 起始弧度
   * @param {*} ePi 终止弧度
   */
  drawArc(arcR,cw,sPi,ePi){
    // 缩放倍数
    const sw =this.data.sf * arcR
    const arc = [cw/2+5,cw/2+5,sw,sPi,ePi]
    return arc
  },
  /**
   * 炮孔
   * @param {*} x 实际坐标
   * @param {*} y 实际坐标
   * @param {*} r 炮孔半径默认2
   */
  drawPi(x,y,r=2){
    // 缩放倍数
    const sw =this.data.sf
    const arc = [x*sw+5, y*sw+5, r, 0, 2 * Math.PI]
    return arc
  },
  /**
   * 直线
   * @param {*} x 实际坐标
   * @param {*} y 实际坐标
   */
  drawLine(x,y){
    // 缩放倍数
    const sw =this.data.sf
    const arc = [x*sw+5, y*sw+5]
    return arc
  }
})