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>
上一篇:上传图片后如何不依赖后端回显?你可能需要indexedDB存储技术


下一篇:关于使用外界存储判断进入页面的方式