微信小程式canvas自定義行走路徑及畫圖及畫線覆寫問題以及旋轉問題（包含踩過的坑）

CanvasContext 是舊版的接口，新版 Canvas 2D 接口與 Web 一緻

從基礎庫 1.9.90 開始，本接口

ctx.setLineWidth(5)
           

停止維護，請使用 CanvasContext.lineWidth 代替

新的使用方法開發文檔說得不是很清楚，沒有具體的 代碼例子，但是可以參考下小程式開發文檔linewidth

/**
     * 畫路徑
     */
    drawRoute1()
    {
      let ctx=this.data.ctx;
      ctx.lineWidth = '3'//設定線段的寬度，這裡采用的是指派的方式 ，
          數值越大，線的寬度越寬，還有這句話的位置要放在你畫的圖形的前面，否則渲染不出來
      ctx.lineCap='round';//設定線段兩側風格
      ctx.strokeStyle='black';//設定描邊顔色
      ctx.strokeRect(10,10, 250, 250)
       ctx.stroke()
    },
           

以下的圖是我随便畫出來做個示範的，如果想圖檔覆寫線上上的話，得把線的 ctx.beginPath()和   ctx.closePath()給寫好（反正我是這麼做的，不然線會把圖檔壓在下面），詳情請看代碼。

//index.json

{
  "usingComponents": {}
}
           

//index.wxml
<canvas
  type="2d"
  id="canvas"
 style="position: relative; left: 2rpx; top: 109rpx; width: 750rpx; height: 1711rpx; display: block; box-sizing: border-box">
 </canvas>
           

/* index.wxss */
#canvas{
    width: 100%;
    height:1334rpx ;
}
page{
    background: rgb(211, 245, 239);
  }
           

//index.js
Page({
    data:{
      ctx:null,
      img:null,
      counTimer:null,
      x:628,
      y:500
    },
    countInterval:function(){
      let that=this;
      this.data.counTimer=setInterval(()=>{
        if(this.data.x==50)
        {
          clearInterval(this.data.counTimer)
        }
        this.setData({
          x:this.data.x-2
        })
        this.drawAll(this.data.x,this.data.y,180)
      },100)
    },
    onLoad:function()
    {
      wx.createSelectorQuery().select('#canvas').fields({ node: true, size: true }).exec((res)=>{
        const canvas=res[0].node
        const cxt=canvas.getContext('2d')
        canvas.requ
        const width = res[0].width
        const height = res[0].height
        // 初始化畫布大小
        const dpr = wx.getWindowInfo().pixelRatio
        canvas.width = width * dpr
        canvas.height = height * dpr
        this.setData({ 
          img:res[0].node.createImage()  ,      
          ctx:res[0].node.getContext('2d')
        })
        this.drawRoute()
        this.drawcar(628,500,180)
        const moveLoop=()=>{
          this.drawAll(this.data.x,this.data.y,180)
          if(this.data.x>50)
          {
            canvas.requestAnimationFrame(moveLoop)
          }
          else if(this.data.x=50)
          {
            canvas.cancelAnimationFrame()
          }
          this.data.x--;
        }
        canvas.requestAnimationFrame(moveLoop)
        const _img=res[0].node.createImage()
        this.data.img.onLoad=()=>{}       
        this.data.img.src='https://hqgw-cos.faw.cn/uploads/cdnImg/src/image/ehs9/ehs9_2_1.png'
        //this.countInterval()
      })
    },

    drawAll(x,y,p)
    {
      this.data.ctx.clearRect(0,0,1000,1300)
      this.drawRoute() 
      this.drawRoute1() 
      this.drawcar(x,y,0)
      this.drawcar1(x,y,p)
    },
    drawRoute()
    {
      let ctx=this.data.ctx
      ctx.strokeStyle='green';//設定描邊顔色
      ctx.lineCap='round';//設定線段兩側風格
      ctx.lineWidth = '20'//設定線段的寬度
      ctx.save();        
      // ctx.setLineCap('butt')
      // ctx.setLineWidth(10)
      // ctx.font = '50rpx sans-serif'
      ctx.beginPath()
      ctx.moveTo(180,250)
      ctx.lineTo(250,280)
      ctx.lineTo(520,300)
      ctx.lineTo(50,380)
      ctx.lineTo(50,500)
      ctx.lineTo(628,500)
      
   
      ctx.restore()
      ctx.stroke()
     
      ctx.save()
      ctx.beginPath()
      ctx.fillStyle='rgb(200,0,0,0.1)'
    
  
      ctx.fillStyle='rgb(28,28,280,0.5)'
      ctx.fillRect(578,475,100,50)
      // ctx.setFillStyle('black')
      // ctx.setFontSize(12)
      ctx.closePath()
      ctx.restore()
      ctx.stroke()
    },
    /**
     * 畫路徑
     */
    drawRoute1()
    {
      let ctx=this.data.ctx;
      ctx.lineWidth = '3'//設定線段的寬度
      ctx.lineCap='round';//設定線段兩側風格
      ctx.strokeStyle='black';//設定描邊顔色
      ctx.strokeRect(10,10, 250, 250)
       ctx.stroke()
    },
    
    /**
     * 畫車
     * @param {x坐标} x 
     * @param {*坐标} y 
     * @param {*角度} p 
     */
    drawcar(x,y,p)
    {
      let ctx=this.data.ctx
        ctx.save()
        ctx.translate(x,y)
        ctx.rotate(p*Math.PI/180)
        ctx.drawImage(this.data.img,0-30,0-15,90,60)
        ctx.restore()
        ctx.stroke()
    },
    drawcar1(x,y,p)
    {
      let ctx=this.data.ctx
        ctx.save()
        ctx.drawImage(this.data.img,10,150,50,50)
        ctx.restore()
        ctx.stroke()
    },
    onUnload: function () {
    }
  })
  


           

該文為自己原創，有些是按照自己的了解去做的，歡迎大家指正及批評，如有問題，可以評論交流，轉載需标明出處，謝謝