Skip to content

引入

ts
import { createWatcherMark } from 't-comm';

// 不支持 tree-shaking 的项目
import { createWatcherMark} from 't-comm/lib/watermark/index';

// 只支持 ESM 的项目
import { createWatcherMark} from 't-comm/es/watermark/index';

createWatcherMark(params)

描述:canvas 实现 watermark

参数

参数名类型描述
paramsobject参数
params.containerHTMLElement容器
params.widthnumber图片宽
params.heightnumber图片高
params.textAlignstring同 ctx.textAlign
params.textBaselinestring同 ctx.textBaseline
params.fontstring同 ctx.font
params.fillStylestring同 ctx.fillStyle
params.contentstring内容
params.rotatenumber旋转角度
params.zIndexnumber层级

示例

ts
const rtx = 'pony';

createWatcherMark({
  content: rtx,
  width: '300',
  height: '300',
  textAlign: 'center',
  textBaseline: 'middle',
  font: '25px Microsoft Yahei',
  fillStyle: 'rgba(184, 184, 184, 0.3)',
  rotate: '-50',
  zIndex: 1000,
});