html2canvas是一个将html元素转化成canvas的库，绘制的canvas绝大多数款式和CSS一致。例如截至1.0.0-alpha.12，虚线边框仍然绘制为实线，border-collapse仍然不太好。
这儿依据github issues里的一个思路，仿真模拟完成了dashed边框实际效果。
可用状况：独立边框较多，即并不是详细边框，另外不考虑到border-radius
1、最先，在html2canvas绘制前，找到必须绘制canvas的元素中的全部虚线边框的 方位和部位
findDashedBorders = (page) => {
const tds = page.querySelectorAll("td");
const borders = [];
tds.forEach(td => {
const computedStyle = window.getComputedStyle(td);
const borderStyle = computedStyle.borderStyle ? computedStyle.borderStyle.split(' ') : [];
const dashedIndex = findAll(borderStyle, 'dashed');
if (dashedIndex.length) {
const rect = td.getBoundingClientRect();
dashedIndex.map(index => {
const border = {
rect,
border: dashedBorder[index]
}
borders.push(border);
td.style[`border${dashedBorder[index]}Color`] = 'transparent';
});
}
});
return borders;
}
page是必须绘制canvas的元素，我这里有dashed边框的全是td元素，因此 搜索全部td元素，应用getComputedStyle()方式搜索它的borderStyle，假如它有dashed边框，那麼这一特性的值的方式为"dashed dashed none none"，因此 依据findAll()这一自定方式寻找全部的dashed的方位（例如"dashed dashed none none"将回到[0, 1]），在其中dashedBorder数字能量数组以下：
const dashedBorder = ["Top", "Right", "Bottom", "Left"];
寻找方向后另外获得它的部位，将方位和位置信息存进borders数字能量数组，另外将这一条边框设为全透明，使html2canvas不绘制这一条框，大家以后会独立解决。 （留意：这一网页页面的虚线边框都是全透明掉，这儿并沒有考虑到绘制进行后将全透明边框变回原先的色调）
2、应用html2canvas获得绘制后的canvas
pages.forEach((page, idx) => {
const borders = this.findDashedBorders(page);
const parentRect = page.getBoundingClientRect();
html2canvas(page, {scale: 2, logging: false, useCORS: true}).then((canvas) => {
this.drawDashedBorder(canvas, borders, parentRect);
......
})
})
pages是必须绘制canvas的全部元素，我们在获得每一个page的虚线边框时，另外获得这一page的部位，便于大家绘制dashed边框时获得边框相对性于这一网页页面的部位。待html2canvas绘制canvas后，大家根据drawDashedBorder()方式进一步绘制出dashed边框，下边完成这一方式。
3、drawDashedBorder()在获得canvas后进一步绘制虚线。
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的官方网完成了。
之上便是文中的所有内容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多的适用脚本之家。
百度统计
沪ICP备13010428号
沪公网安备 31010602002205号
