[html] 使用canvas制作一个印章

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</body>

<script>
    var dataUrl = '';
    function createStampUrl() {
      var canvas = document.createElement('canvas');
      canvas.width = 300;
      canvas.height = 200;
      canvas.setAttribute('width', 300);
      canvas.setAttribute('height', 200);
      var ctx = canvas.getContext('2d');

      ctx.beginPath();
      ctx.ellipse(150, 100, 100, 50, 0, 0, Math.PI * 2);
      ctx.fillStyle = "red";
      ctx.strokeStyle = "red";
      ctx.fill();
      ctx.stroke();
      ctx.closePath();

      ctx.beginPath();
      ctx.ellipse(150, 100, 90, 40, 0, 0, Math.PI * 2);
      ctx.fillStyle = "white";
      ctx.fill();
      ctx.stroke();
      ctx.closePath();

      ctx.beginPath();
      ctx.ellipse(150, 100, 70, 30, 0, 0, Math.PI * 2);
      ctx.strokeStyle = "red";
      ctx.lineWidth = 2;
      ctx.stroke();
      ctx.closePath();


      ctx.font = "14px Microsoft YaHei";
      ctx.fillStyle = "red";
      ctx.fillText("hello canvas", 110, 105);

      dataUrl = canvas.toDataURL("image/jpeg");

      var app = document.querySelector("#app");
      app.style.width = "300px";
      app.style.height = "300px";
      app.style.backgroundImage = `url(${dataUrl})`;
      app.style.backgroundRepeat = 'no-repeat';
    }
    createStampUrl();
</script>
</html>

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题