端午节快乐！—— canvas写的粽子~~~~~

最新推荐文章于 2023-06-23 12:23:52 发布

一麻袋小猫

最新推荐文章于 2023-06-23 12:23:52 发布

阅读量257

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/Zmongo/article/details/125101413

版权

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>端午</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("端午节吃粽子！", 0, 150);
        //叶子
        ctx.beginPath();
        ctx.moveTo(20, 100);
        ctx.quadraticCurveTo(150, 150, 300, 70);
        ctx.quadraticCurveTo(150, 20, 20, 100);
        ctx.fillStyle = "#07C160";
        ctx.fill();
        // 叶子纹理
        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();

        //第二个粽子
        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();
        // // 第二个粽子阴影
        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();
        //第一个粽子
        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();
        // 第一个粽子阴影
        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();
        // 粽子表情
        ctx.beginPath();
        ctx.moveTo(107, 55);
        ctx.arc(102, 55, 5, 0, Math.PI, true); //眼 1
        ctx.moveTo(92, 55);
        ctx.arc(87, 55, 5, 0, Math.PI, true); //眼 1

        ctx.moveTo(146, 25);
        ctx.arc(139, 25, 5, 0, Math.PI, true); //眼 2
        ctx.moveTo(161, 25);
        ctx.arc(156, 25, 5, 0, Math.PI, true); //眼 2
        ctx.moveTo(100, 65);
        ctx.arc(95, 65, 5, 0, Math.PI, false);   // 口(顺时针)
        ctx.stroke();
        // 第二个粽子
        ctx.beginPath();
        ctx.moveTo(160, 45);
        ctx.arc(150, 45, 10, 0, Math.PI, false);   // 口(顺时针)
        ctx.fillStyle = "#000";
        ctx.fill();
      }
    }
  </script>
</head>
<body onload="draw();">
    <canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>