canvas水印

紫微前端

于 2021-03-24 11:14:04 发布

阅读量4k

点赞数

CC 4.0 BY-SA版权

分类专栏：常用代码片段

本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/115167488

常用代码片段专栏收录该内容

168 篇文章 ¥39.90 ¥99.00

订阅专栏

本文介绍如何使用HTML5的Canvas元素在网页上动态生成并添加水印效果，包括文字水印和图片水印的实现方法，以及如何调整水印的位置、透明度等属性，为你的网站内容提供版权保护。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="water">
    <canvas id="canvas"></canvas>
  </div>
</template>

<script>

export default {
  name: "Water",
  mounted() {
    var canvas = document.getElementById("canvas");
    var width = window.innerWidth;
    var height = window.innerHeight;
    canvas.setAttribute("width", width + "px");
    canvas.setAttribute("height", height + "px");
    var ctx = canvas.getContext("2d");
    var word1 = "王小明";
    var word2 = "15168836829";
    var word = word1 + word2;
    var fontSize = 20;
    var fontLength =
      word1.length * fontSize + (word2.length * fontSize) / 2 - 5;
    var widthStep = width / fontLength;
    var heigtStep = height / fontSize;
    ctx.fillStyle = "blue";

    function r

了解本专栏