代码历史备份

(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