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

news2024/9/20 9:36:07

文章目录

- 准备工作
- - 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);
	}
}