方法一:
通过graphic属性进行添加
graphic: [{
type: 'group',
rotation: Math.PI / 4, //正方形旋转的角度
bounding: 'raw',
right: 70,
bottom: 35,
z: 100,
children: [
{
type: 'rect',
left: 'center',//描述怎么根据父元素进行定位
top: 'center',//描述怎么根据父元素进行定位
z: 100,
shape: {
width: 140,
height: 30
},
style: {
fill: 'rgba(0,0,0,0.3)'
}
},
{
type: 'text',
left: 'center',
top: 'center',
z: 100,
style: {
fill: '#fff',
text: 'aupoo.cn',
font: 'bolder 14px Microsoft YaHei'
}
}
]
}],
效果图:
方法二:
通过canvas绘制水印在backgroundColor中添加
//绘制水印
const waterMarkText = 'YJFicon';
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = canvas.height = 100;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.globalAlpha = 0.08;
ctx.font = '20px Microsoft Yahei';
ctx.translate(50, 50);
ctx.rotate(-Math.PI / 4);
ctx.fillText(waterMarkText, 0, 0);
option = {
backgroundColor: {//在背景属性中添加
type: 'pattern',
image: canvas,
repeat: 'repeat'
},
}
效果图: