canvas 实现全屏倾斜重复水印

​

参考：

1. html、js、canvas实现水印_html页面使用canvas绘制重复水印-CSDN博客

效果

​​​​

不求水印显示完全。

实现代码

<template><div class="watermark" ref="waterMark"></div></template><script lang="ts">import { Component, Vue, Prop, Watch, Ref } from 'vue-property-decorator'@Component({name: 'WaterMark',components: {},})export default class WaterMark extends Vue {@Prop({ default: '' })private text!: string // 水印文本内容// 水印配置参数private config: any = {angle: -30, // 统一倾斜角度 [-90, 90]fontSize: 20, // 字体大小fontFamily: 'Arial, sans-serif', // 字体color: 'rgba(0, 0, 0, 0.5)', // '#cccccc', // 文字颜色opacity: 0.5, // 透明度zIndex: 999, // 层叠顺序gap: [200, 200], // 水印之间的间距[行，纵]}@Ref()private waterMark!: HTMLDivElement@Watch('text', { immediate: true })private onTextChange() {this.createWatermarks()}// 批量创建水印private createWatermarks() {this.addWatermark(this.text)}mounted() {// 确保页面加载完成后再创建水印this.$nextTick(() => {this.createWatermarks()})// 窗口变化时重新生成window.addEventListener('resize', this.createWatermarks)}private addWatermark(text: any) {if (!this.waterMark && !text) {return}const { fontSize, opacity, color, fontFamily, angle, gap } = this.configconst canvas: any = document.createElement('canvas')const ctx: any = canvas.getContext('2d')const width: any = window.innerWidthconst height: any = window.innerHeightlet nWidth = widthlet nHeight = heightif (angle) {// 根据角度计算宽高和原点移动const radian = (angle * Math.PI) / 180const sin = Math.sin(Math.abs(radian))const cos = Math.cos(Math.abs(radian))nWidth = width + height * sinnHeight = width * sin + height * coscanvas.width = nWidthcanvas.height = nHeightctx.translate(-height * sin * cos, height * sin * sin)ctx.rotate(radian)}ctx.globalAlpha = opacityctx.font = `${fontSize}px ${fontFamily}`ctx.fillStyle = color // 文字颜色和透明度ctx.textAlign = 'center'ctx.textBaseline = 'middle'// 在页面上重复绘制水印for (let x = 0, i = 0; x < nWidth; x += text.length * fontSize + gap[0]) {for (let y = 0; y < nHeight; y += gap[1]) {ctx.fillText(text, x + (i % 2) * (gap[0] / 2), y)i++}}const watermark = new Image()watermark.src = canvas.toDataURL('image/png')if (this.waterMark.style) {this.waterMark.style.backgroundImage = `url(${watermark.src})`this.waterMark.style.backgroundRepeat = 'repeat'}this.waterMark.dataset.watermark = 'true' // 标记水印元素}}</script><style lang="scss" scoped>.watermark {position: fixed;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;z-index: 9999;}</style>

计算旋转后的宽高和移动原点位置

蓝色长方形为原画布长宽，已知为 h，w（此处即为屏幕长宽）。

浅蓝色长方形为以A点为旋转中心，旋转x度之后的画布，

需要得到旋转之后能覆盖原画布大小的长宽-深蓝色长方形，即可求得：hsinX+w（长度没有很严格）, hcosX+wsinX

旋转点也从 A点跑到了 B点：（- hsinXsinX, hsinXcosX)。

公式补充

提示

如果要考虑文字都在可视区域，还需要考虑 textLeft和 textRight

const measureText = ctx.measureText(text)const textLeft = measureText.actualBoundingBoxLeftconst textRight = measureText.actualBoundingBoxRight

另外只要判断 x 和 y 值在合理区间之内即可。

​