微信小程序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 () {
    }
  })
  


           

该文为自己原创，有些是按照自己的理解去做的，欢迎大家指正及批评，如有问题，可以评论交流，转载需标明出处，谢谢