canvas和SVG两种实现网页全屏水印效果的方式

1.canvas实现网页全屏水印效果,如下展示

代码:

<div class="watermark">
	<div class="grid">
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
	</div>
</div>

function createWaterMark() {
  const angle = -20;
  const txt = 'www.jianbaizhan.com'
  const canvas = document.createElement('canvas');
  canvas.width = 180;
  canvas.height = 100;
  const ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, 180, 100);
  ctx.fillStyle = '#000';
  ctx.globalAlpha = 0.1;
  ctx.font = `16px serif`
  ctx.rotate(Math.PI / 180 * angle);
  ctx.fillText(txt, 0, 50);
  return canvas.toDataURL();
}
const watermakr = document.createElement('div');
watermakr.className = 'watermark';
watermakr.style.backgroundImage = `url(${createWaterMark()})`
document.body.appendChild(watermakr);

2.SVG实现方式

js代码:

// SVG实现方式
function createWaterMark() {
  const svgStr =
	`<svg xmlns="http://www.w3.org/2000/svg" width="180px" height="100px">
	  <text x="0px" y="30px" dy="16px"
	  text-anchor="start"
	  stroke="#000"
	  stroke-opacity="0.1"
	  fill="none"
	  transform="rotate(-20)"
	  font-weight="100"
	  font-size="16"
	  >
		www.jianbaizhan.com
	  </text>
	</svg>`;
  return `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(svgStr)))}`;
}
const watermakr = document.createElement('div');
watermakr.className = 'watermark';
watermakr.style.backgroundImage = `url(${createWaterMark()})`
document.body.appendChild(watermakr);

效果:

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/705

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！