插件 踩坑记录

html2canvas插件本身不支持文字渐变字

html2canvas插件本身不支持文字渐变字（background-clip: text nor box-shadow are currently supported），如果要实现渐变字，这里涉及到修改插件源码

第一步

实现渐变字需要用到canvas的createLinearGradient需要四个参数，其中两个参数需要计算出来

第二步修改renderNodeContent(6845行)，case1(6857行)

找到html2canvas源码renderNodeContent方法，里面case1渲染文本的方法renderTextNode添加代码

  var changyiWidth = 0;
  var changyiLeft = child.textBounds[0].bounds.left;
  for (var changyii = 0; changyii < child.textBounds.length; changyii++) {
	changyiWidth += child.textBounds[changyii].bounds.width;
  }
  changyiWidth = changyiLeft + changyiWidth;
  return [4 /*yield*/, this.renderTextNode(child, styles, changyiWidth, changyiLeft)];

第三步修改renderTextNode方法(6745行)

找到 html2canvas源码renderTextNode方法加入canvas渐变，注意这里需要css加入特殊样式来区别哪些字需要渐变（必须输唯一的）

例如，这里加了一个fontWeight:410需要渐变字

if (styles.fontWeight == 410) {
	  var gradient = _this.ctx.createLinearGradient(changyiLeft, 0, changyiWidth, 0);
	  gradient.addColorStop(0, '#946036');
	  gradient.addColorStop(0.17, '#B37B46');
	  gradient.addColorStop(0.22, '#E3BC7B');
	  gradient.addColorStop(0.26, '#FDDF98');
	  gradient.addColorStop(0.48, '#B37B46');
	  gradient.addColorStop(0.58, '#C9985D');
	  gradient.addColorStop(0.64, '#D2A467');
	  gradient.addColorStop(1, '#946036');
	  _this.ctx.fillStyle = gradient;
}

css样式里加入样式，color: transparent必须加，也不能是别的色值