文章目录
欢迎来到童话乐园！这里有一些有趣的绘图功能，让你在代码的世界中感受童话般的乐趣。本篇博文将介绍如何使用代码来绘制七彩彩虹、微笑笑脸和魔法树。让我们一起来探索吧！
准备工作
在开始之前，你需要一个支持 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);
}
}
点击 “点击绘制魔法大树” 按钮，即可在画布上看到绘制出的魔法树。
结语
通过这篇博文，我们介绍了童话乐园中的三个绘图功能：七彩彩虹、微笑笑脸和多变的魔法树。希望这些绘图功能能带给你一些乐趣和创造力的灵感。你可以根据自己的需求，进一步定制和改进这些代码，创造出更加独特的效果。
感谢你阅读这篇博文，如果你有任何问题或建议，欢迎在下方留言。祝你在童话乐园中玩得开心！哈哈哈嗝！
