html2canvas实现dashed虚线边框的示例

drawDashedBorder = (canvas, borders, parentRect) => {
var ctx = canvas.getContext("2d");
ctx.setLineDash([6, 3]);
ctx.strokeStyle = '#3089c7';
ctx.lineWidth = 1;
ctx.globalAlpha = 1;
 borders.forEach(border => {
var left = (border.rect.left + 0.5 - parentRect.left)*2;
var right = (border.rect.right - 0.5 - parentRect.left)*2;
var top = (border.rect.top + 0.5 - parentRect.top)*2;
var bottom = (border.rect.bottom - 0.5 - parentRect.top)*2;
 switch (border.border) {
case 'Top':
ctx.beginPath();
ctx.moveTo(left, top);
ctx.lineTo(right, top);
ctx.stroke();
break;
case 'Right':
ctx.beginPath();
ctx.moveTo(right, top);
ctx.lineTo(right, bottom);
ctx.stroke();
break;
case 'Bottom':
ctx.beginPath();
ctx.moveTo(left, bottom);
ctx.lineTo(right, bottom);
ctx.stroke();
break;
case 'Left':
ctx.beginPath();
ctx.moveTo(left, top);
ctx.lineTo(left, bottom);
ctx.stroke();
break;
default:
break;
}
})
}

意思就是根据borders里dashed边框的方向和位置信息，在canvas里获取2d上下文后使用setLineDash方法把虚线绘制出来。位置都*2是因为我们之前canvas使用了2倍大小。

4、这个方法目前只在chrome测试可用，firefox无效，因为firefox下getComputedStyle返回的信息和chrome不同。

由于对canvas理解不深无法pr，只能期待html2canvas的官方实现了。