记录一下实现界面水印的方法

最新推荐文章于 2024-07-07 17:36:45 发布

Deku_Ln

最新推荐文章于 2024-07-07 17:36:45 发布

阅读量356

点赞数

分类专栏： JS学习文章标签： html5 javascript

本文链接：https://blog.csdn.net/Deku_Ln/article/details/112093759

版权

本文详细介绍了如何使用HTML5和JavaScript在用户界面上添加水印效果。通过结合CSS样式和JavaScript动态绘制，实现在网页中自定义文字或图像水印，增强界面的版权保护。

摘要由CSDN通过智能技术生成

<script>
  // 这里定义一个不会定义的唯一id名
  let id = '123456789qwe'
 // str 是我们需要定义水印内容
 // ctxWidth 是我们单个水印内容的宽度，ctxHeight 是我们单个水印内容的高度
 // fontSize是水印内容字体 大小
 // color是我们水印内容颜色
  let setCanvas = (str, ctxWidth = 150, ctxHeight = 120, fontSize=14, color="#eeeee") => {
  // 如果存在改id则将其节点删除
   if(document.getElementById(id)) {
    document.removeChild(document.getElementById(id))
   }
   // 定义canvas节点
    let canvas = document.createElement('canvas')
    canvas.width = ctxWidth
    canvas.height = ctxHeight
    let ctx = canvas.getContext('2d')
    // 这里先进行清除画布
    ctx.clearRect(0, 0, ctxWidth, ctxHeight)
    //  画布的旋转度
    ctx.rotate((25 * Math.PI) / 180)
    // 画布内容的字体设置
    ctx.font = `${fontSize}px makeRandom`
    // 画布文本颜色填充
    ctx.fillStyle = color
    // 定义内容基线
    ctx.textBaseline = 'Middle'
     // 渲染画布文字内容包括内容和横纵坐标
    ctx.fillText(str, ctxWidth / 4, ctxHeigh