master

分支 (1)

管理

管理

master

blog-source-host
/
字符画
/
ascii_art_css.html

<!doctype html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>ascii art</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html,
    body {
      width: 100%;
      height: 100%;
    }
    body {
      position: relative;
      overflow: hidden;
    }
    p {
      font-weight: 600;
      position: absolute;
      width: 100%;
      overflow: hidden;
      left: 50%;
      top: 50%;
      transform: scale(0.9);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      transform-origin: 50% 50%;
      /*js生成*/
      /*font-size: 12px;*/
      /*line-height: 12px;*/
      /*width: 400px;*/
      /*height: 400px;*/
      /*background-image: url(./img/test.jpg);*/
    }
  </style>
</head>
<body>
<p>
  富强、民主、文明、和谐，倡导自由、平等、公正、法治、爱国、敬业、诚信、友善。
</p>
<script>
  const $p = document.getElementsByTagName('p')[0]
  // 字体大小
  const fontSize = 12
  // 背景图片
  const imgUrl = './ikun.gif'
  $p.style.cssText = `font-size:${fontSize}px;line-height:${fontSize}px;`
  const text = $p.innerHTML.replace(/(\s+)/g, '')
  const textLength = text.length

  const img = new Image()
  img.src = imgUrl
  img.complete ? onImgLoaded() : (img.onload = onImgLoaded)

  function onImgLoaded () {
    const imgRatio = img.width / img.height
    let imgWidth = window.innerWidth
    let imgHeight = imgWidth / imgRatio
    if (imgHeight > window.innerHeight) {
      imgHeight = window.innerHeight
      imgWidth = imgHeight * imgRatio
    }
    const needTextLength = (imgWidth / fontSize) * (imgHeight / fontSize)
    if (needTextLength > textLength) {
      $p.innerHTML = new Array(Math.floor(needTextLength / textLength) + 1).fill(text).join('')
    }
    $p.style.cssText += `margin-left:${-imgWidth / 2}px;margin-top:${-imgHeight / 2}px;width:${imgWidth}px;height:${imgHeight}px;background-image:url(${imgUrl});`
  }
</script>
</body>
</html>