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

news2024/11/13 8:35:13

文章目录

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

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

结语

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

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

在这里插入图片描述
创作不易,感谢您的点赞与支持。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/617104.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vector 练习

目录 一、创建动态二维数组的方法 0x01 C语言法 0x02 C法 二、 杨辉三角 三、电话号码的数字组合 一、创建动态二维数组的方法 0x01 C语言法 int** p (int**)malloc(sizeof(int*) * M);//创建M行的数组,每一行都是一个数组 for(size_t i 0;i < M;i) {p[i] (int*)mal…

Redis主从集群与哨兵集群

一、Redis 哨兵集群原理 Redis 哨兵集群是一种高可用性的解决方案&#xff0c;用于监控 Redis 实例的状态并在实例出现故障时自动进行故障转移。 Redis 哨兵集群由多个哨兵实例组成&#xff0c;每个哨兵实例都运行在独立的服务器上。每个哨兵实例都会周期性地向 Redis 实例发…

Linux内存初始化-启动阶段的内存初始化

本文代码基于ARM64平台, Linux kernel 5.15 在加载kernel 之前&#xff0c; kernel对于系统是有一定要求的&#xff0c;明确规定了boot阶段必须要把MMU关闭&#xff1a; arch/arm64/kernel/head.S/** Kernel startup entry point.* ---------------------------** The require…

路径规划算法:基于松鼠优化的路径规划算法- 附代码

路径规划算法&#xff1a;基于松鼠优化的路径规划算法- 附代码 文章目录 路径规划算法&#xff1a;基于松鼠优化的路径规划算法- 附代码1.算法原理1.1 环境设定1.2 约束条件1.3 适应度函数 2.算法结果3.MATLAB代码4.参考文献 摘要&#xff1a;本文主要介绍利用智能优化算法松鼠…

入门大数据就业前景怎么样?

时势造英雄&#xff0c;对个人而言亦是如此。跟随趋势&#xff0c;找准自己未来发力的赛道&#xff0c;在合适的时间干合适的事&#xff0c;就是抓住自己的未来。 猎聘大数据研究院发布了《2022未来人才就业趋势报告》 从排名来看&#xff0c;2022年1-4月各行业中高端人才平均…

mac m1/m2 安装 ps 2023 插件无法显示扩展界面

碎碎念&#xff1a;一直在踩坑的路上&#xff0c;甚至想休息时间玩一会儿 ps 都能踩坑 问题描述 新的 m2 芯片 mac 安装了色环插件后&#xff0c;在窗口界面中没有找到扩展&#xff0c;且在首选项->增效工具的旧版扩展也是灰色的 题外话&#xff1a;记录一下 mac 的 photo…

2023尚上优选-社区团购 优选电商Spring Cloud Alibaba

尚上优选2023最新企业级微服务架构项目 分布式微服务后端VUE、小程序 尚上优选是真实居住社区内居民团体的一种互联网线上线下购物消费行为&#xff0c;是依托真实社区的一种区域化、小众化、本地化、网络化的团购形式。简而言之&#xff0c;它是依托社区和团长社交关系实现生…

DHCP与DHCPv6讲解

目录 DHCP DHCP端口号 DHCP报文 DHCP工作过程 DHCP租期续租 DHCPv6 DHCPv6端口号 DHCPv6报文 DHCPv6工作原理 DHCP DHCP端口号 DHCP主要有两个端口号&#xff0c;分别是UDP67和UDP68 DHCP客户端向DHCP服务器发送报文时采用68端口号&#xff0c;DHCP服务器向DHCP客户端…

整合开源治理经验,共谋开源社区发展|2023 开放原子全球开源峰会开源社区治理与运营分论坛即将启幕

在数智时代广泛连接、同步演进和网状协作特性的催化下&#xff0c;开源社区正在成为技术应用和行业数字化发展的重要推动力量。开展数字技术开源社区的有效治理&#xff0c;对调和相互冲突的内外部需求、协调相互竞合的参与主体、整合差异化的绩效目标具有重要理论和实践意义。…

ChatGPT 时代,程序员的生存之道

ChatGPT 近期炙手可热&#xff0c;仿佛没有什么问题是它不能解决的。出于对 ChatGPT 的好奇&#xff0c;我们决定探索下它对于前端开发人员来讲&#xff0c;是作为辅助工具多一些&#xff0c;还是主力工具更多一些&#xff1f; 2D 能力测试 我们就挑选一个著名的递归回溯问题—…

自学黑客(网络安全),一般人我劝你还是算了!

网络安全在当今信息社会越来越受到重视&#xff0c;但不同于Java、C/C等后端开发岗位有非常明晰的学习路线&#xff0c;网络安全更多是靠自己摸索&#xff0c;要学的东西又杂又多&#xff0c;难成体系。 这也是为什么我经常劝别人不要入网络安全的坑&#xff0c;因为一般人真坚…

调用腾讯API实现人体关键点分析

目录 1. 作者介绍2. 调用腾讯API实现人体关键点分析2.1 API的简介2.2 腾讯API使用工具2.4 MPII数据集介绍 3. 实验流程与结果3.1调用百度API流程3.2完整代码3.3测试结果 1. 作者介绍 张思怡&#xff0c;女&#xff0c;西安工程大学电子信息学院&#xff0c;2022级研究生&#…

MongoDB简单快速入门

MongoDB简单快速入门 简单介绍应用场景安装与启动基础操作SpringBoot整合MongoDB 简单介绍 MongoDB是一个开源、高性能、无模式的文档型数据库。NoSQL数据库产品中的一种&#xff0c;是最想关系型数据库的非关系型数据库 应用场景 安装与启动 直接将安装的压缩包进行解压&…

unity 3d实现下雨、雾气、萤火虫和火花四溅的粒子效果

文章目录 先看最终效果1. 下雨效果2. 雾气效果3. 萤火虫和火花四溅的效果 3d下雨粒子效果涟漪效果雨滴和涟漪效果结合水花效果雨滴涟漪水花结合问题雾气效果萤火虫火花效果萤火虫和火花效果结合 先看最终效果 1. 下雨效果 2. 雾气效果 3. 萤火虫和火花四溅的效果 3d下雨粒子效…

【C/C++】基础知识之string字符串

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; &#x1f525;c系列专栏&#xff1a;C/C零基础到精通 &#x1f525; 给大…

整数规划在数学建模中的应用及MATLAB实现

2023年9月数学建模国赛期间提供ABCDE题思路加Matlab代码,专栏链接(赛前一个月恢复源码199,欢迎大家订阅):http://t.csdn.cn/Um9Zd 目录 整数规划基本概念 整数规划原理 MATLAB实现 1. 使用intlinprog求解整数规划问题 数学建模案例&#xff1a;设备选购优化 问题建模 MA…

时间序列预测 | Matlab基于鲸鱼算法优化随机森林(WOA-RF)与随机森林(RF)的时间序列预测对比

文章目录 效果一览文章概述部分源码参考资料效果一览 文章概述 时间序列预测 | Matlab基于鲸鱼算法优化随机森林(WOA-RF)与随机森林(RF)的时间序列预测对比 评价指标包括:MAE、RMSE和R2等,代码质量极高,方便学习和替换数据。要求2018版本及以上。 部分源码 %---------------…

算法刷题-数组-二分查找

算法刷题-数组-二分查找 二分查找思路二分法第一种写法二分法第二种写法 总结相关题目推荐python语言版本 二分查找 力扣题目链接 给定一个 n 个元素有序的&#xff08;升序&#xff09;整型数组 nums 和一个目标值 target &#xff0c;写一个函数搜索 nums 中的 target&…

数据结构与算法系列之快速排序

&#x1f497; &#x1f497; 博客:小怡同学 &#x1f497; &#x1f497; 个人简介:编程小萌新 &#x1f497; &#x1f497; 如果博客对大家有用的话&#xff0c;请点赞关注再收藏 &#x1f31e; 快速排序 快速排序是任取待排序元素序列中的某元素作为基准值&#xff0c;按照…

【QT】TCP/UDP详解及实现

TCP/UDP TCP/IP模型TCP协议头部格式三次握手四次挥手 UDP协议头部格式 Socket编程tcpudp代码实现服务端&#xff1a;客户端&#xff1a; 总结 TCP/IP模型 TCP模型是一个常见的网络协议参考模型&#xff0c;也称为TCP/IP模型或互联网模型。它是指TCP/IP协议族中的一组协议&…