html代码画圣诞树

圣诞节到了，怎么能少了一颗漂亮的圣诞树呢？下面我们来学习如何用HTML代码画一颗圣诞树。

<html>
<head>
    <title>HTML代码画圣诞树</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>

    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");

        // 画树干
        ctx.fillStyle = "#8B4513";
        ctx.fillRect(180,200,40,160);

        // 画树叶
        ctx.beginPath();
        ctx.moveto(200,60);
        ctx.lineto(80,300);
        ctx.lineto(320,300);
        ctx.closePath();
        ctx.fillStyle = "#008000";
        ctx.fill();

        // 画装饰品
        ctx.fillStyle = "#FFD700";
        ctx.beginPath();
        ctx.arc(200,110,30,Math.PI * 2);
        ctx.closePath();
        ctx.fill();

        ctx.fillStyle = "#BA55D3";
        ctx.beginPath();
        ctx.arc(150,220,20,Math.PI * 2);
        ctx.closePath();
        ctx.fill();

        ctx.fillStyle = "#FFC0CB";
        ctx.beginPath();
        ctx.arc(250,Math.PI * 2);
        ctx.closePath();
        ctx.fill();
    </script>
</body>
</html>

html代码画圣诞树

上述代码通过canvas标签实现了画一颗圣诞树。首先我们先设置了画布的大小和画布标识id为"myCanvas"，然后通过JS代码获取到画布并设置其上下文为2d。

画树干的方法是使用ctx.fillRect()方法，该方法需要传入x、y、width、height四个参数，分别表示矩形的左上角x坐标、左上角y坐标、宽度和高度。

画树叶的方法是使用ctx.beginPath()、ctx.moveto()、ctx.lineto()和ctx.closePath()四个方法，首先通过beginPath()方法开始一条新路径，然后使用moveto()方法将路径起点移动到指定位置，使用lineto()方法连接路径上的两个点，最后使用closePath()方法关闭路径。最后，我们需要设置填充颜色并调用fill()方法填充闭合图形。

最后，我们通过画圆的方法画了三个装饰品。主要使用了ctx.arc()方法，该方法需要传入x、y、r、startAngle和endAngle等参数，分别表示圆心的x和y坐标、半径、起始角度和结束角度。最后同样需要设置填充颜色并调用fill()方法填充圆形。

以上就是用HTML代码画圣诞树的方法，希望能够对大家有所帮助。

相关推荐