当前位置: 主页 > 日常积累 > js >

(转载)微信小程序canvas绘制虚线

wxml:

<canvas canvas-id="canvas1"></canvas>

wxss:

  canvas{
        width:708px;
        height:760rpx;
    }

js:

var context = wx.createContext()//创建并返回绘图上下文context对象
    context.setStrokeStyle("#cccccc")//设置线条的颜色
    context.setLineWidth(1)//设置线条宽度
    function drawDashLine(ctx, x1, y1, x2, y2, dashLength){  //传context对象,始点x和y坐标,终点x和y坐标,虚线长度
      var dashLen = dashLength === undefined ? 3 : dashLength,
      xpos = x2 - x1, //得到横向的宽度;
      ypos = y2 - y1, //得到纵向的高度;
      numDashes = Math.floor(Math.sqrt(xpos * xpos + ypos * ypos) / dashLen); 
      //利用正切获取斜边的长度除以虚线长度,得到要分为多少段;
      for(var i=0; i<numDashes; i++){
         if(i % 2 === 0){
             ctx.moveTo(x1 + (xpos/numDashes) * i, y1 + (ypos/numDashes) * i); 
             //有了横向宽度和多少段,得出每一段是多长,起点 + 每段长度 * i = 要绘制的起点;
          }else{
              ctx.lineTo(x1 + (xpos/numDashes) * i, y1 + (ypos/numDashes) * i);
          }
       }
      ctx.stroke();
    }
    drawDashLine(context, 0, 95, 364, 95, 5);//横向虚线
    drawDashLine(context, 0, 190, 364, 190, 5);//横向虚线
    drawDashLine(context, 0, 285, 364, 285, 5);//横向虚线
    drawDashLine(context, 91, 0, 91, 400, 5);//纵向虚线
    drawDashLine(context, 182, 0, 182, 400, 5);//纵向虚线
    drawDashLine(context, 273, 0, 273, 400, 5);//纵向虚线
    //微信小程序画图
    wx.drawCanvas({
      canvasId: 'canvas1',
      actions: context.getActions()
    });


效果图:

(转载)微信小程序canvas绘制虚线

感谢杨同事的分享--转载来源公司知识共享库

[日志信息]

该日志于 2016-11-14 18:10 由 陈文超 发表在 陈文超前端博客 网站下,你除了可以发表评论外,还可以转载 “(转载)微信小程序canvas绘制虚线” 日志到你的网站或博客,但是请保留源地址及作者信息,谢谢!!    (尊重他人劳动,你我共同努力)

Copyright © 2015-2018 陈文超博客 保留所有权利 琼ICP备15003229号| 托管于阿里云 · 博客稳定运行 | 网站地图 |

返回顶部