目标及要求

createWatermark 函数参数说明

请完善 js/index.js 文件中的 TODO 部分，实现创建水印函数的功能 ，创建的水印需要使用<span>标签展示。

提供的代码

/**
 * 创建一个文字水印的div
 * @param  {string} text - 水印文字
 * @param  {string} color - 水印颜色
 * @param  {number} deg - 水印旋转角度
 * @param  {number} opacity - 水印透明度
 * @param  {number} count - 水印数量
 */
function createWatermark(text, color, deg, opacity, count) {
  // 创建水印容器
  const container = document.createElement('div')
  container.className = 'watermark'

  // TODO: 根据输入参数创建文字水印

  return container
}

// 以下代码不需要修改
// 调用createWatermark方法，创建图片水印
const watermark = createWatermark('WaterMark', 'white', 45, 0.5, 11)
// 将水印挂载到图片容器上
const container = document.querySelector('.container')
container.appendChild(watermark)

// 提供图片保存功能
const button = document.querySelector('button')
button.addEventListener('click', () => {
  domtoimage.toJpeg(document.querySelector('.container')).then((dataUrl) => {
    const link = document.createElement('a')
    link.download = 'image.jpeg'
    link.href = dataUrl
    link.click()
  })
})

题解

分析思路：

题目中要求水印用span标签展示，并且有一定的数量要求，观察到已创建一个水印容器div，我们可以使用循环将span标签添加到div容器中，并设置文字样式参数。

代码：

function createWatermark(text, color, deg, opacity, count) {
  // 创建水印容器
  const container = document.createElement("div");
  container.className = "watermark";

  // TODO: 根据输入参数创建文字水印
  for (let i=0;i<count;i++){
    const span=document.createElement('span')
    span.style.color=color
    span.style.transform=`rotate(${deg}deg)`
    span.style.opacity=opacity
    span.innerText=text
    container.appendChild(span)
  }
  return container;
}

步骤分析：

首先在for循环内，设定循环次数，即添加的水印个数count。在循环内，每次创建一个span标签，并根据输入的参数值（参数已给定）设置标签样式，最后再水印容器container加入该标签。循环上述步骤count次以添加count个标签。

总结：

这段代码涉及了几个基本的 JavaScript 知识点和编程概念，包括：

1. 循环 (for 循环)：使用 for 循环来根据输入的 count 参数创建指定数量的水印元素。
2. 条件语句 (for 循环中的条件判断)：for 循环中的条件 i < count 确保了循环次数不超过输入的 count 参数值。
3. DOM 操作：通过 document.createElement() 创建新的 HTML 元素（span），并使用 appendChild() 将其添加到父容器中。
4. 样式操作：通过设置 span.style 对象的属性来修改水印元素的样式，包括颜色、旋转角度和透明度等。
5. 字符串模板：使用模板字符串（`）来构建transform属性值，其中包含了 JavaScript 表达式${deg}`。
6. 函数返回值：通过 return 关键字返回包含所有水印元素的容器 container，以便将其添加到页面中。