当前位置：网站首页>Happy Dragon Boat Festival—— Zongzi written by canvas~~~~~

Happy Dragon Boat Festival—— Zongzi written by canvas~~~~~

2022-07-03 09:47:00 【A sack kitten】

Insert picture description here 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Dragon Boat Festival </title>
    <script type="application/javascript">
    function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
        ctx.font = "48px serif";
        ctx.textBaseline = "hanging";
        ctx.strokeText(" Eat Zongzi on the Dragon Boat Festival ！", 0, 150);
        // leaf 
        ctx.beginPath();
        ctx.moveTo(20, 100);
        ctx.quadraticCurveTo(150, 150, 300, 70);
        ctx.quadraticCurveTo(150, 20, 20, 100);
        ctx.fillStyle = "#07C160";
        ctx.fill();
        //  Leaf texture 
        ctx.beginPath();
        ctx.moveTo(20, 100);
        ctx.lineTo(300, 70);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(170, 85);
        ctx.lineTo(150, 118);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(230, 76);
        ctx.lineTo(200, 108);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(230, 76);
        ctx.lineTo(200, 50);
        ctx.stroke();

        // The second zongzi 
        ctx.beginPath();
        ctx.moveTo(150, 0);
        ctx.quadraticCurveTo(25, 87, 125, 75);
        ctx.quadraticCurveTo(75, 75, 225, 75);
        ctx.quadraticCurveTo(170, 0, 150, 0);
        ctx.fillStyle = "#EED3B5";
        ctx.fill();
        // //  The second zongzi shadow 
        ctx.beginPath();
        ctx.moveTo(150, 10);
        ctx.quadraticCurveTo(25, 87, 145, 55);
        ctx.quadraticCurveTo(55, 65, 200, 55);
        ctx.quadraticCurveTo(170, 10, 150, 10);
        ctx.fillStyle = "#FBE8D1";
        ctx.fill();
        // The first zongzi 
        ctx.beginPath();
        ctx.moveTo(85, 25);
        ctx.quadraticCurveTo(25, 87, 30, 100);
        ctx.quadraticCurveTo(90, 100, 150, 100);
        ctx.quadraticCurveTo(120, 25, 85, 25);
        ctx.fillStyle = "#EED3B5";
        ctx.fill();
        //  The first zongzi shadow 
        ctx.beginPath();
        ctx.moveTo(85, 35);
        ctx.quadraticCurveTo(25, 87, 55, 80);
        ctx.quadraticCurveTo(80, 90, 130, 80);
        ctx.quadraticCurveTo(120, 35, 85, 35);
        ctx.fillStyle = "#FBE8D1";
        ctx.fill();
        //  Zongzi expression 
        ctx.beginPath();
        ctx.moveTo(107, 55);
        ctx.arc(102, 55, 5, 0, Math.PI, true); // eye  1
        ctx.moveTo(92, 55);
        ctx.arc(87, 55, 5, 0, Math.PI, true); // eye  1

        ctx.moveTo(146, 25);
        ctx.arc(139, 25, 5, 0, Math.PI, true); // eye  2
        ctx.moveTo(161, 25);
        ctx.arc(156, 25, 5, 0, Math.PI, true); // eye  2
        ctx.moveTo(100, 65);
        ctx.arc(95, 65, 5, 0, Math.PI, false);   //  mouth ( Clockwise )
        ctx.stroke();
        //  The second zongzi 
        ctx.beginPath();
        ctx.moveTo(160, 45);
        ctx.arc(150, 45, 10, 0, Math.PI, false);   //  mouth ( Clockwise )
        ctx.fillStyle = "#000";
        ctx.fill();
      }
    }
  </script>
</head>
<body onload="draw();">
    <canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
原网站

版权声明
本文为[A sack kitten]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/184/202207030905373511.html

边栏推荐

猜你喜欢

随机推荐