html2canvas边框线,html2canvas如何实现dashed虚线边框？

最新推荐文章于 2023-11-17 10:16:14 发布

heyonie

最新推荐文章于 2023-11-17 10:16:14 发布

阅读量450

点赞数

文章标签： html2canvas边框线

本文和大家分享的主要是前端中html2canvas相关内容，希望通过本文的分享对大家学习web前端有所帮助。

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;