微信公众号开发

微信小程序用canvas 绘制虚线

本文主要是介绍微信小程序用canvas 绘制虚线,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

1:效果图
在这里插入图片描述
代码:

 <canvas
          style="width: 300px; height: 1rpx;"
          canvas-id="firstCanvas"
          class="line"
        ></canvas>
  // 绘制一条虚线
    drawLine() {
      var context = wx.createCanvasContext('firstCanvas');
      context.setLineDash([8, 15]);
      context.lineWidth = 2;
      context.strokeStyle = '#979797';
      context.beginPath();
      context.moveTo(0, 0);
      context.lineTo(740, 0);
      context.stroke();
      context.draw();
    }
 created() {
   
    this.drawLine();
  }
这篇关于微信小程序用canvas 绘制虚线的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!