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

文章目录

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

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

创作不易，看完觉得不错，右上角点个“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>

function drawTree() {var canvas = document.getElementById("tree-canvas");var ctx = canvas.getContext("2d");// 添加上面的两句代码，将每次渲染不一样的树形// canvas.width = 640;// canvas.height = 480;drawTrees(ctx, 320, 470, 60, -Math.PI / 2, 12, 12);
}var drawTrees = function(ctx, startX, startY, length, angle, depth, branchWidth) {var rand = Math.random,newLength, newAngle, newDepth, maxBranch = 3,endX, endY, maxAngle = 2 * Math.PI / 4,subBraches;ctx.beginPath();ctx.moveTo(startX, startY);endX = startX + length * Math.cos(angle);endY = startY + length * Math.sin(angle);ctx.lineCap = 'round';ctx.lineWidth = branchWidth;ctx.lineTo(endX, endY);if (depth <= 2) {ctx.strokeStyle = 'rgb(0,' + (((rand() * 64) + 128) >> 0) + ',0)';} else {ctx.strokeStyle = 'rgb(' + (((rand() * 64) + 64) >> 0) + ',50,25)';}ctx.stroke();newDepth = depth - 1;if (!newDepth) return;subBranches = (rand() * (maxBranch - 1)) + 1;branchWidth *= 0.7;for (var i = 0; i < subBranches; i++) {newAngle = angle + rand() * maxAngle - maxAngle * 0.5;newLength = length * (0.7 + rand() * 0.3);drawTrees(ctx, endX, endY, newLength, newAngle, newDepth, branchWidth);}
}