54 lines
1.9 KiB
JavaScript
54 lines
1.9 KiB
JavaScript
|
// watermark.js
|
|||
|
|
Component({
|
|||
|
|
data: {
|
|||
|
|
// 这里是一些组件内部数据
|
|||
|
|
watermarkText: '水印测试'
|
|||
|
|
},
|
|||
|
|
attached() {
|
|||
|
|
// 在组件实例进入页面节点树时执行
|
|||
|
|
// this.drowsyUserinfo()
|
|||
|
|
// console.log(wx.getStorageSync('markConfig'))
|
|||
|
|
this.setData({
|
|||
|
|
markConfig:wx.getStorageSync('markConfig'),
|
|||
|
|
watermarkText: (wx.getStorageSync('userInfo') || {}).name || '水印测试'
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 这里是一个自定义方法
|
|||
|
|
drowsyUserinfo: function () {
|
|||
|
|
var markConfig = wx.getStorageSync('markConfig') || {};
|
|||
|
|
var ctx = wx.createCanvasContext("myCanvas");
|
|||
|
|
ctx.rotate(20 * Math.PI / 180); //设置文字的旋转角度，角度为45°；
|
|||
|
|
//对斜对角线以左部分进行文字的填充
|
|||
|
|
//用for循环达到重复输出文字的效果，这个for循环代表纵向循环
|
|||
|
|
for (let j = 1; j < 10; j++) {
|
|||
|
|
ctx.beginPath();
|
|||
|
|
ctx.setFontSize(16);
|
|||
|
|
ctx.setFillStyle("rgba(0,155,169,.5)");
|
|||
|
|
ctx.fillText(markConfig.wmTitle, 0, 50 * j);
|
|||
|
|
for (let i = 1; i < 10; i++) { //这个for循环代表横向循环
|
|||
|
|
ctx.beginPath();
|
|||
|
|
ctx.setFontSize(15);
|
|||
|
|
ctx.setFillStyle("rgba(0,155,169,.5)");
|
|||
|
|
ctx.fillText(markConfig.wmTitle, 180 * i, 150 * j);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
//两个for循环的配合，使得文字充满斜对角线的左下部分
|
|||
|
|
//对斜对角线以右部分进行文字的填充逻辑同上
|
|||
|
|
for (let j = 0; j < 10; j++) {
|
|||
|
|
ctx.beginPath();
|
|||
|
|
ctx.setFontSize(16);
|
|||
|
|
ctx.setFillStyle("rgba(0,155,169,.5)");
|
|||
|
|
ctx.fillText(markConfig.wmTitle, 0, -50 * j);
|
|||
|
|
for (let i = 1; i < 10; i++) {
|
|||
|
|
ctx.beginPath();
|
|||
|
|
ctx.setFontSize(16);
|
|||
|
|
ctx.setFillStyle("rgba(0,155,169,.5)");
|
|||
|
|
ctx.fillText(markConfig.wmTitle, 180 * i, -150 * j);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
ctx.draw();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|