HTML生成CSS文字

最新推荐文章于 2023-06-14 20:00:09 发布

懒鸟

最新推荐文章于 2023-06-14 20:00:09 发布

阅读量226

点赞数

分类专栏： html js 文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_43166518/article/details/125254144

版权

js 同时被 2 个专栏收录

13 篇文章 2 订阅

订阅专栏

html

5 篇文章 0 订阅

订阅专栏

<html>
<head>
  <meta charset="utf-8">
  <title>生成css文字</title>

<style id="jsbin-css">
input {
  font-size: 12px;
}

#show {
  width: 0px;height: 0px;
}
</style>
</head>
<body>
  <h1>输入文字生成文字</h1><a href="?gfdgf=<?php echo time(); ?>"  >打开链接。。</a>
  <input type="text" id="text" placeholder="输入文字" value="代">
  <button onclick="gen()">生成div</button>
  <hr>
  <fieldset>
    <legend>CSS内容</legend>
    <textarea id="css" cols="80" rows="10"></textarea>
  </fieldset>
  <div id="show"></div>
<script>
(function($){
  
  window.gen = function(){
    var text = $('text').value;
    var canvas = document.createElement('canvas');
    var width = text.length * 30;
    var height = 40;
    canvas.setAttribute('width', width);
    canvas.setAttribute('height', height);
    //canvas.style.backgroundColor = '#eee';
    //document.body.appendChild(canvas);
    var ctx = canvas.getContext('2d');
    ctx.font = "30px Arial";
    ctx.textAlign = 'left';
    ctx.fillStyle = "#000"; //生成字体的颜色
    ctx.fillText(text, 0, 30);
    var data = ctx.getImageData(0,0, width, height);
    var css = [];
    for(var x = 0; x < width; x++){
       for(var y = 0; y < height; y++){
         var idx = (x + y * width) * 4;
         var r = data.data[idx + 0];
         var g = data.data[idx + 1];
         var b = data.data[idx + 2];
         var a = data.data[idx + 3];
         if(a > 107){
              css.push(x + 'px ' + y + 'px 0px 0.6px rgba(' + r + ',' + g + ',' + b + ',' + a + ')');
         }
       }
	}   
    var show = $('show');
    $('css').value = '<div style="width: 0px;height: 0px; \n  box-shadow:\n    ' + css.join(',\n    ') + '\n;"></div>';
    show.style.boxShadow = css.join(',');
  };
  
})(document.getElementById.bind(document));
</script>

</body>
</html>

上面的这用JS生成CSS文字，挺好玩的，只不过这样有点多此一举