代码历史备份

(function() {
  // 创建一个随机颜色函数
  function getRandomColor() {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }

  // 给除了body和html之外的所有元素添加随机背景渐变
  function applyRandomGradientToElements() {
    const allElements = document.querySelectorAll('u,i,small');
    allElements.forEach(function(element) {
      const color1 = getRandomColor();
      const color2 = getRandomColor();
      element.style.cssText += `
        background-image: linear-gradient(to right, ${color1},${color2}) ;
        -webkit-background-clip: text ;
        color: transparent ;
      `;
    });
  }

  // 创建按钮并添加到页面中
  const button = document.createElement('button');
  button.textContent = '改变颜色';
  document.body.appendChild(button);

  // 给按钮添加点击事件
  button.addEventListener('click', applyRandomGradientToElements);
})();

h

h

document.addEventListener('DOMContentLoaded', function() {
  // 获取所有p元素
  var pElements = document.querySelectorAll('p');

  // 为每个p元素添加按钮
  pElements.forEach(function(p, index) {
    // 创建按钮
    var button = document.createElement('button');
    button.textContent = '点击将文字转换为图片并显示';
    button.onclick = function() {
      textToImage(p.innerText);
    };

    // 将按钮添加到p元素后面
    p.parentNode.insertBefore(button, p.nextSibling);
  });

  function textToImage(text) {
    // 创建canvas元素
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');

    // 设置字体和填充颜色
    var fontSize = 24; // 增加字体大小
    ctx.font = fontSize + 'px Arial';
    ctx.fillStyle = 'black';

    // 处理文本，并支持换行
    var textLines = text.split('\n');
    var lineHeight = fontSize + 38; //2倍为4， 假设行高是字体大小加上一些额外空间
    var maxWidth = 0;

    // 计算最大宽度和总高度
    textLines.forEach(function(line) {
      var metrics = ctx.measureText(line);
      if (metrics.width > maxWidth) {
        maxWidth = metrics.width;
      }
    });
    var totalHeight = textLines.length * lineHeight;

    // 设置canvas的宽度和高度，并放大2倍以提高清晰度
    var scale = 4; // 放大倍数
    canvas.width = maxWidth * scale + 20 * scale; // 添加一些边距，并放大
    canvas.height = totalHeight * scale + 20 * scale; // 添加一些边距，并放大

    // 设置缩放比例
    ctx.scale(scale, scale);

    // 在canvas上绘制每一行文本
    textLines.forEach(function(line, index) {
      ctx.fillText(line, 10 / scale, (lineHeight * (index + 1)) / scale);
    });

    // 将canvas转换为图片
    var imgData = canvas.toDataURL('image/png');

    // 打开新窗口并设置窗口内容为图片
    var newWindow = window.open();
    newWindow.document.write('<img src="' + imgData + '" alt="Text as Image" style="width: ' + (canvas.width / scale) + 'px; height: ' + (canvas.height / scale) + 'px;" /><meta name="viewport" content="width=device-width,initial-scale=2"/>');
  }
});

 
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有details元素
  var detailsElements = document.querySelectorAll('details');

  // 为每个details元素添加按钮
  detailsElements.forEach(function(details, index) {
    // 获取对应的p元素和summary元素
    var pElement = details.querySelector('p');
    var summaryElement = details.querySelector('summary');

    // 创建按钮
    var button = document.createElement('button');
    button.textContent = '点击将文字转换为图片并显示';
    button.onclick = function() {
      // 如果details元素没有展开，则展开它以获取p元素的内容
      var wasOpen = details.open;
      if (!wasOpen) {
        details.open = true;
      }

      // 获取文本内容，并在summary后添加两个换行，同时用书名号包裹summary内容
      var summaryText = '《' + summaryElement.innerText + '》\n\n';
      var pText = pElement.innerText;

      // 如果之前没有展开，现在将其关闭
      if (!wasOpen) {
        details.open = false;
      }

      // 调用函数生成图片
      textToImage(summaryText, pText);
    };

    // 将按钮添加到details元素后面
    details.parentNode.insertBefore(button, details.nextSibling);
  });

  function textToImage(summaryText, pText) {
    // 创建canvas元素
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');

    // 设置字体和填充颜色
    var fontSize = 24; // 增加字体大小
    ctx.font = fontSize + 'px Arial';
    ctx.fillStyle = 'black';

    // 处理文本，并支持换行
    var textLines = (summaryText + pText).split('\n'); // 将summary文本作为第一行，并在其后添加两个换行
    var lineHeight = fontSize + 10; // 假设行高是字体大小加上一些额外空间
    var maxWidth = 0;

    // 计算最大宽度和总高度
    textLines.forEach(function(line) {
      var metrics = ctx.measureText(line);
      if (metrics.width > maxWidth) {
        maxWidth = metrics.width;
      }
    });
    
    // 设置canvas的宽度和高度，并放大2倍以提高清晰度
    var scale = 2; // 放大倍数
    canvas.width = maxWidth * scale + 20 * scale; // 添加一些边距，并放大
    // 设置canvas的高度为文本行数乘以行高，并加上一些额外的边距
    canvas.height = (textLines.length * lineHeight) * scale + 20 * scale; // 添加一些边距，并放大

    // 设置缩放比例
    ctx.scale(scale, scale);

    // 在canvas上绘制每一行文本
    textLines.forEach(function(line, index) {
      ctx.fillText(line, 10 / scale, (lineHeight * (index + 1)) / scale);
    });

    // 将canvas转换为图片
    var imgData = canvas.toDataURL('image/png');

    // 打开新窗口并设置窗口内容为图片
    var newWindow = window.open();
    newWindow.document.write('<img src="' + imgData + '" alt="Text as Image" style="width: ' + (canvas.width / scale) + 'px; height: ' + (canvas.height / scale) + 'px;" /><meta name="viewport" content="width=device-width,initial-scale=2"/>');
  }
});
 

    <style>
        /* 设置一些样式，让显示的文字更加明显 */
        .text-popup {
            position: absolute;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 0;
            border-radius: 10px;
            font-size: 16px;
            pointer-events: none; /* 防止文本弹出层影响触摸事件 */
        }
    </style>
</head>
<body>

<script>
// 定义一个数组，包含要显示的不同文字
var texts = ["我", "我", "我", "我", "我", "我",];
// 初始化一个变量来记录当前显示的文字索引
var currentIndex = 0;

// 为整个文档添加触摸事件监听器
document.addEventListener("touchstart", function(e) {
    // 创建一个新的元素来显示文字
    var textPopup = document.createElement("div");
    textPopup.classList.add("text-popup");
    textPopup.textContent = texts[currentIndex];

    // 设置文本弹出层的位置为触摸位置
    textPopup.style.left = e.touches[0].clientX + 'px';
    textPopup.style.top = e.touches[0].clientY + 'px';

    // 将文本弹出层添加到文档中
    document.body.appendChild(textPopup);

    // 设置一个定时器来移除文本弹出层
    setTimeout(function() {
        document.body.removeChild(textPopup);
    }, 10000); // 文字显示2秒后消失

    // 更新索引，以便下次触摸时显示不同的文字
    currentIndex = (currentIndex + 1) % texts.length;
});

</script>

h

h

h

h

h

h

h

h