canvas画线 文本 填充

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
  </style>

</head>

<body>
  <img id="img" width="50px" height="50px" src="">

  <script>
   function createImg(distance, color,text) {
        var c = document.createElement("canvas");
        c.width = distance; //注意：没有单位
        c.height = distance; //注意：没有单位
        var ctx = c.getContext("2d");
        ctx.beginPath();
        ctx.fillStyle ="green";
         ctx.fillRect(0, 0, distance, distance);
        ctx.moveTo (0,0);       
        ctx.lineTo (0,distance);  
        ctx.lineTo (distance,distance);   
        ctx.lineTo (distance,0);   
        ctx.lineTo (0,0); 
        ctx.lineWidth = 1;          
        ctx.strokeStyle = color;  
        ctx.stroke();    
        ctx.textAlign = 'center';
        ctx.font = "bold "+distance/10+"px Arial";
        ctx.fillStyle = 'yellow';
        ctx.fillText(text, distance / 2, distance / 2+3);
        return c.toDataURL("image/png");
      }
      document.getElementById('img').src= createImg(50, "red","833336")
  </script>
</body>

</html>
posted @ 2020-05-26 13:49  刘浩2561179983  阅读(624)  评论(0)  编辑  收藏  举报