小程序开发--页面添加水印MGWatermark

本文介绍如何在小程序中实现自定义水印功能,通过利用canvas绘制技术,详细解析主要代码并提供示例及Demo链接,适用于需要在页面上添加水印以保护敏感信息的场景。
摘要由CSDN通过智能技术生成
MGWatermark 添加水印

   开发中一些给特定人显示的页面内容,又不能外泄怎么办???像交管六合一系统、政府政务系统都是不能外泄的,如果外泄根据什么去追究责任呢? 这就需要对页面做一些特殊处理,通常的方式就是加水印,即使外泄,也可以根据水印追究责任,从而约束外泄人员

   小程序在水印方面没有特定的API,所以需要我们自定义,下面是我通过画布canvas进行水印绘制已完成添加水印的功能

文末附demo 欢迎交流!!!

主要代码进行解析

水印用了画布canvas绘制

(1) 使用 wx.createContext 获取绘图上下文 context

var ctx = wx.createCanvasContext("watermarkCanvas");

(2) 设置文字的旋转角度,角度为45°;

ctx.rotate(45 * Math.PI / 180);

(3) 开始创建一个路径。需要调用 fill 或者 stroke 才会使用路径进行填充或描边

  • 在最开始的时候相当于调用了一次 beginPath。
  • 同一个路径内的多次 setFillStyle、setStrokeStyle、setLineWidth等设置,以最后一次设置为准。

ctx.beginPath();

(4) 设置填充色
ctx.setFillStyle("rgba(169,169,169,.5)");

(5) 在画布上绘制被填充的文本, 文本 x坐标

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值