受朋友委托,帮其做一个具有水印的身份证图,时间比较紧张,代码逻辑可能不是最简便的,但是效果不错,有更好的想法的码友可以给我分享一下心得,不胜感激!
先上效果图:
不同的图片只需要更换不同的图片路径即可,canvas画布的大小受项目影响自行调整。
下边上代码:
wxml:
<canvas canvas-id='myCanvas' style='width:500px;height:500px;background-color:black;'></canvas>
放js之前先放一张思路图:
// pages/canvas/canvasDemo/canvasDemo1/canvasDemo1.js
var ctx = wx.createCanvasContext("myCanvas");
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
ctx.drawImage("/images/cat.jpg",0,0,375,375)//在画布上绘入图片,参数含义移步手册。
ctx.rotate(45 * Math.PI / 180);//设置文字的旋转角度,角度为45°;
//对斜对角线以左部分进行文字的填充
for (let j = 1; j < 10; j++) { //用for循环达到重复输出文字的效果,这个for循环代表纵向循环
ctx.beginPath();
ctx.setFontSize(30);
ctx.setFillStyle("rgba(255,255,255,.5)");
ctx.fillText("水印", 0, 50 * j);
for (let i = 1; i < 10; i++) {//这个for循环代表横向循环,
ctx.beginPath();
ctx.setFontSize(30);
ctx.setFillStyle("rgba(255,255,255,.5)");
ctx.fillText("水印", 80 * i, 50 * j);
}
}//两个for循环的配合,使得文字充满斜对角线的左下部分
//对斜对角线以右部分进行文字的填充逻辑同上
for (let j = 0; j < 10; j++) {
ctx.beginPath();
ctx.setFontSize(30);
ctx.setFillStyle("rgba(255,255,255,.5)");
ctx.fillText("水印", 0, -50 * j);
for (let i = 1; i < 10; i++) {
ctx.beginPath();
ctx.setFontSize(30);
ctx.setFillStyle("rgba(255,255,255,.5)");
ctx.fillText("水印", 80 * i, -50 * j);
}
}
ctx.draw();
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
代码简单暴力模拟出水印效果,如果有更好的想法,欢迎来互相交流~!