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() });
效果图:
感谢杨同事的分享--转载来源公司知识共享库