在不到200行的HTML代码中，实现老板要求为他的孩子绘制一个童话乐园：七彩彩虹、微笑笑脸和魔法树

今天药忘吃喽~ 2023-10-12 11:21 5阅读 0赞

#### 文章目录 ####

*   *  准备工作
     *   *  1.绘制七彩彩虹
         *  2.绘制微笑笑脸
         *  3.绘制多变的魔法树
     *  结语

![在这里插入图片描述][467b673ad4964687934f2da8bf4ff61b.gif_pic_center]

欢迎来到童话乐园！这里有一些有趣的绘图功能，让你在代码的世界中感受童话般的乐趣。本篇博文将介绍如何使用代码来绘制七彩彩虹、微笑笑脸和魔法树。让我们一起来探索吧！

创作不易，看完觉得不错，右上角点个“Starred”★喔，感谢老铁！

### 准备工作 ###

在开始之前，你需要一个支持 HTML 的浏览器，以及一些基本的网页开发知识。确保你已经创建了一个新的 HTML 文件，并将以下代码复制粘贴到你的文件中。

<!DOCTYPE html>
    <html>
    <head>
        <title>童话乐园</title>
        <style>
            /* 样式代码 */
        </style>
    </head>
    <body>
        <div class="container">
            
            
            
        </div>
        
        <script>
            /* JavaScript 代码 */
        </script>
    </body>
    </html>

#### 1.绘制七彩彩虹 ####

我们首先来绘制一个美丽的七彩彩虹。通过点击按钮，你将在画布上看到一个绚丽的彩虹。让我们看看它的代码：

<div class="section">
        <h2 class="section-title">绘制七色彩虹</h2>        
        <button onclick="drawRainbow()">点击绘制彩虹</button>
        <canvas id="rainbow-canvas" width="500" height="500"></canvas>
    </div>

function drawRainbow() {
        
        var canvas = document.getElementById("rainbow-canvas");
        var ctx = canvas.getContext("2d");
    
        // 创建渐变
        var grd = ctx.createRadialGradient(250, 500, 150, 250, 500, 350);
        grd.addColorStop(0, "#ffffff");
        grd.addColorStop(0.3, "#8B00FF");
        grd.addColorStop(0.4, "#0000FF");
        grd.addColorStop(0.5, "#00FFFF");
        grd.addColorStop(0.6, "#00FF00");
        grd.addColorStop(0.7, "#FFFF00");
        grd.addColorStop(0.8, "#FF7F00");
        grd.addColorStop(0.9, "#FF0000");
        grd.addColorStop(1, "#ffffff");
    
        // 填充渐变
        ctx.fillStyle = grd;
        ctx.fillRect(10, 10, 500, 500)
    }

点击 “点击绘制彩虹” 按钮，即可在画布上看到绘制出的彩虹。

#### 2.绘制微笑笑脸 ####

接下来，我们将绘制一个微笑的笑脸。通过点击按钮，你将在画布上看到一个可爱的笑脸。让我们看看它的代码：

<div class="section">
        <h2 class="section-title">绘制微笑笑脸</h2>           
        <button onclick="drawSmile()">点击绘制微笑</button>
        <canvas id="smile-canvas" width="400" height="350"></canvas>
    </div>

function drawSmile() {
        
        var canvas = document.getElementById("smile-canvas");
        var ctx = canvas.getContext("2d");
    
        // 绘制笑脸内容和边框
        ctx.beginPath();
        ctx.arc(200, 200, 100, 0, 2 * Math.PI);
        ctx.fillStyle = '#ffff00';
        ctx.fill();
        ctx.lineWidth = 2;
        ctx.strokeStyle = '#ffff00';
        ctx.stroke();
    
        // 绘制笑脸左眼
        ctx.beginPath();
        ctx.arc(150, 150, 20, 0, 2 * Math.PI);
        ctx.fillStyle = '#000';
        ctx.fill();
    
        // 绘制笑脸右眼
        ctx.beginPath();
        ctx.arc(250, 150, 20, 0, 2 * Math.PI);
        ctx.fillStyle = '#000';
        ctx.fill();
    
        // 绘制笑脸嘴型
        ctx.beginPath();
        ctx.arc(200, 230, 40, 0, Math.PI);
        ctx.strokeStyle = '#000';
        ctx.stroke();
    }

点击 “点击绘制微笑” 按钮，即可在画布上看到绘制出的笑脸。

#### 3.绘制多变的魔法树 ####

最后，我们来绘制一棵多变的魔法树。通过点击按钮，你将在画布上看到一棵神奇的魔法大树。让我们看看它的代码：

<div class="section">
        <h2 class="section-title">绘制多变的魔法树</h2>           
        <button onclick="drawTree()">点击绘制魔法大树</button>
        <canvas id="tree-canvas" width="800" height="700"></canvas>
    </div>

点击 “点击绘制魔法大树” 按钮，即可在画布上看到绘制出的魔法树。

### 结语 ###

通过这篇博文，我们介绍了童话乐园中的三个绘图功能：七彩彩虹、微笑笑脸和多变的魔法树。希望这些绘图功能能带给你一些乐趣和创造力的灵感。你可以根据自己的需求，进一步定制和改进这些代码，创造出更加独特的效果。

感谢你阅读这篇博文，如果你有任何问题或建议，欢迎在下方留言。祝你在童话乐园中玩得开心！哈哈哈嗝！

![在这里插入图片描述][9ce24fd4c4f34259b3f2847a45711daf.gif_pic_center]创作不易，感谢您的点赞与支持。

[467b673ad4964687934f2da8bf4ff61b.gif_pic_center]: https://img-blog.csdnimg.cn/467b673ad4964687934f2da8bf4ff61b.gif#pic_center
[9ce24fd4c4f34259b3f2847a45711daf.gif_pic_center]: https://img-blog.csdnimg.cn/9ce24fd4c4f34259b3f2847a45711daf.gif#pic_center