【Canvas与艺术】绘制动态太极图
【图例】
【代码】
<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head><title>绘制旋转太极图</title><style type="text/css">.centerlize{margin:0 auto;width:1200px;}</style></head><body οnlοad="init();"><div class="centerlize"><canvas id="myCanvas" width="10px" height="10px" style="border:1px dotted black;">如果看到这段文字说您的浏览器尚不支持HTML5 Canvas，请更换浏览器再试.</canvas></div></body>
</html>
<script type="text/javascript">
<!--
/*****************************************************************
* 将全体代码(从<!DOCTYPE到script>)拷贝下来，粘贴到文本编辑器中，
* 另存为.html文件，再用chrome浏览器打开，就能看到实现效果。
******************************************************************/// canvas的绘图环境
var ctx;// 边长
const LENGTH=540;// 舞台对象
var stage;//-------------------------------
// 初始化
//-------------------------------
function init(){// 获得canvas对象var canvas=document.getElementById('myCanvas'); canvas.width=LENGTH;canvas.height=LENGTH;// 初始化canvas的绘图环境ctx=canvas.getContext('2d'); ctx.translate(LENGTH/2,LENGTH/2);// 原点平移到画布中央// 准备stage=new Stage(); stage.init();// 开幕animate();
}// 播放动画
function animate(){ stage.update(); stage.paintBg(ctx);stage.paintFg(ctx); // 循环if(true){window.requestAnimationFrame(animate); }
}// 舞台类
function Stage(){var step=0;// 初始化this.init=function(){}// 更新this.update=function(){step++;if(step>=60000){step=0;}}// 画背景this.paintBg=function(ctx){ctx.clearRect(-LENGTH/2,-LENGTH/2,LENGTH,LENGTH);// 清屏 }// 画前景this.paintFg=function(ctx){ ctx.save();ctx.rotate(step*Math.PI/60);// 外圈轮廓ctx.strokeStyle="black";ctx.beginPath();ctx.arc(0,0,256,0,Math.PI*2,true);ctx.closePath();ctx.stroke();// 左边黑鱼，注意顺顺逆三步要首尾连续ctx.filleStyle="black";ctx.beginPath();ctx.arc(0,-128,128,Math.PI*0.5,Math.PI*1.5,true);// 顺时针ctx.arc(0,0,256,Math.PI*1.5,Math.PI*0.5,true); // 顺时针ctx.arc(0,128,128,Math.PI*0.5,Math.PI*1.5,false);// 逆时针ctx.closePath();ctx.fill();// 白鱼黑眼 ctx.beginPath();ctx.fillStyle="black";ctx.arc(0,128,32,0,Math.PI*2,true);ctx.fill();ctx.closePath(); // 黑鱼白眼ctx.beginPath();ctx.fillStyle="white";ctx.arc(0,-128,32,0,Math.PI*2,true);ctx.fill();ctx.closePath(); ctx.restore();}
}/*--------------------------------------------------------------------------
《魔鬼的广告》
你若伏地拜我，我就把这一国与这国的荣华赐你；
你若伏地拜我，我就把这一省与这省的荣华赐你；
你若伏地拜我，我就把这一市与这市的荣华赐你；
你若伏地拜我，我就把这一公司与这公司的荣华赐你；
--------------------------------------------------------------------------*/
//-->
</script>
END
相关文章：
【Canvas与艺术】绘制动态太极图
【图例】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>绘制旋转太极图</title><style type"text/css"&g…...
Llama 2 模型
非常清楚！！！Llama 2详解 - 知乎 (zhihu.com)https://zhuanlan.zhihu.com/p/649756898?utm_campaignshareopn&utm_mediumsocial&utm_psn1754103877518098432&utm_sourcewechat_session一些补充理解： 序列化ÿ…...
SQLiteC/C++接口详细介绍sqlite3_stmt类（十一）
返回：SQLite—系列文章目录 上一篇：SQLiteC/C接口详细介绍sqlite3_stmt类（十） 下一篇： SQLiteC/C接口详细介绍sqlite3_stmt类（十二） 43、sqlite3_reset sqlite3_reset 函数用于重置已经编…...
【理解机器学习算法】之Clustering算法(Agglomerative Clustering)
聚合聚类(Agglomerative Clustering)是一种层次聚类算法，通过逐步合并或“聚集”它们来构建嵌套聚类。这种方法采用自底向上的方式构建聚类层次：它从将每个数据点作为单个聚类开始，然后迭代合并最接近的聚类对，直到所有数据点合并…...
千帆AppBuilder开发参考-应用API调用说明
介绍 百度智能云千帆AppBuilder平台提供了AppBuilder-SDK，开发者可使用SDK，快捷的开发功能，提升开发效率。 AppBuilder-SDK提供了完整的AI原生应用开发套件，包括丰富的开发组件和应用示例代码。开发组件包括大模型组件、AI能力组…...
python自定义日历库，与对应calendar库函数功能基本一致
目录 自定义日历库 常用列表 日期列表 常用函数 闰年判断 月份天数 元旦序号 日历表头 星期序号 序号及天数 月历字串 打印月历 年历字串 打印年历 对比测试 测试结果 完整代码 运行结果 自定义日历库 自定义日历库函数，并使得其与python calend…...
css3鼠标悬停图片特效,图片悬停效果源码
特效介绍 css3鼠标悬停图片特效,图片悬停效果源码，可以在网页上面作为自己的动态加载名片，放到侧边栏或者网站合适的位置即可 动态效果 代码下载 css3鼠标悬停图片特效,图片悬停效果源码...
使用CSS3画出一个叮当猫HTML源码
我们经常使用PS或者Flash制作动画，本文则介绍了如何用CSS3画出个叮当猫，实现过程很有趣，感兴趣的朋友可以参考一下 首先，先把HTML结构搭建好： <div class"wrapper"> <!--叮当猫整体--> <di…...
Spring Boot 自动化单元测试类的编写过程
前言 Web环境模拟测试 企业开发不仅要保障业务层与数据层的功能安全有效，也要保障表现层的功能正常。但是我们一般对表现层的测试都是通过postman手工测试的，并没有在打包过程中代码体现表现层功能被测试通过。那么能否在测试用例中对表现层进行功能测…...
复试专业前沿问题问答合集8-3——RNN、Hadoop、GPT大语言模型
复试专业前沿问题问答合集8-3——RNN、Hadoop、GPT大语言模型 深度学习中的的RNN、Hadoop、GPT大语言模型的原理关系问答： GPT（Generative Pre-trained Transformer）和RNN（Recurrent Neural Network）是两种在自然语言处理（NLP）领域广泛使用的深度学习模型。它们在处理…...
序列的使用
目录 序列的创建 序列的使 Oracle从入门到总裁:https://blog.csdn.net/weixin_67859959/article/details/135209645 在许多数据库之中都会存在有一种数据类型 — 自动增长列，它能够创建流水号。如果想在 Oracle 中实现这样的自动增长列，可…...
golang kafka sarama 源码解析
消费者组重平衡 github.com/!shopify/saramav1.27.2/consumer_group.go func (c *consumerGroup) newSession(ctx context.Context, topics []string, handler ConsumerGroupHandler, retries int) (*consumerGroupSession, error) {// 获取broker组协调器coordinator, err :…...
Flutter知识点整理
JVM 1.Flutter Hot reload 实现原理 一、原理概述 Hot Reload 只能在 Debug 模式下使用，因为 Debug 模式下，Flutter 采用的是 JIT（ 动态编译），代码是运行在 Dart VM 上，JIT 将 Dart 编译成可以运行在 Dart…...
现代游戏引擎架构
一、并行编程 1.1 为什么需要并行编程 游戏的渲染计算对算力要求很高，所以我们需要把操作系统的资源利用到极致。 但是摩尔定律已经不在适用了，硬件的发展目前已经达到瓶颈。所以我们需要通过数量来提高计算效率。 1.2 并行编程基础 进程与线程&#…...
深度学习：复杂工业场景下的复杂缺陷检测方法
摘要：在复杂的工业场景中，缺陷检测一直是一个重要而具有挑战性的任务。近年来，深度学习技术的快速发展为复杂工业场景下的缺陷检测提供了新的解决方案。本文将介绍深度学习在复杂工业场景下的复杂缺陷检测中的应用，并探讨其技术进…...
CSDN个人简介优化 html font属性
CSDN个人简介优化 html font属性 个人简介个人简介优化字体21种样式选择字体大小设置4号字体 字体颜色设计渐变色（可惜不能显示） 字体加粗设置 <b>标签 个人简介 🌈你好呀！我是 是Yu欸 🌌 2024每日百字篆刻时光…...
从哈希桶角度看 unordered_map 与 unordered_set 的实现
文章目录 一、引言二、C unordered系列的无序关联式容器概览三、基于哈希桶的C unordered系列数据结构模拟实现1、unordered_map的模拟实现2、unordered_set的模拟实现3、哈希桶及其迭代器实现的代码 四、扩展与应用1. 自定义哈希函数2. 其他unordered数据结构unordered_multim…...
飞天使-k8s知识点27-kubernetes温故知新2-deployment
文章目录 RC和RS无状态应用管理 deployment有状态应用statefulSetdaemonSet RC和RS RC不会使用在生产环境 RS 比RC 多了标签选择器 ，RS 用deployment管理，用于容器编排无状态应用管理 deployment apiVersion: apps/v1 kind: Deployment metadata:name:…...
手机网页关键词视频爬虫采集软件可导出视频分享链接|视频无水印批量下载工具
全新音视频批量下载工具，为您解放视频管理烦恼！ 现如今，音上涌现出大量精彩的视频内容，但是要想高效地获取、管理和分享这些视频却是一件颇具挑战的事情。针对这一难题，我们自主研发了全新的音视频批量下载工具&#x…...
基于OpenCV的图像处理案例之图像矫正（Python）
Index 目录索引 写在前面解决思路参考 写在前面 本文通过一个案例介绍如何使用OpenCV将倾斜的扫描文档图像进行水平矫正。 解决思路 因为扫描图像中的大部分文字倾斜后，同一行文字也在同一条直线，所以可以通过拟合直线来计算文本倾斜角度，…...
HarmonyOS ArkTS DateUtil 日期增减与日历计算完整指南
文章目录 背景一、引言二、日期增减方法详解使用示例 三、日历计算方法详解四、Demo 演示：日期增减结果展示五、Demo 演示：月历视图完整实现六、日历视图关键点解析为什么要填充前置空格？getLastDayOfMonth 的实现技巧 七、小结 背景 近期发现…...
0.2毫秒快速启动的操作系统
在工业控制以及航空航天等核心场景，极速启动就是高可靠系统的生命线。0.2毫秒超快启动搭配硬件看门狗，让设备在掉电重启、异常恢复时瞬时归位，关键任务永不延误！ https://www.bilibili.com/video/BV11mLY6VERt/?spm_id_from333.1…...
巧用对称性与平均值原理：低成本实现高精度电阻分压器校准
1. 项目概述：用数学思维突破测量设备的精度极限在电子实验室里捣鼓精密电路，尤其是涉及到电压基准、信号调理或者高精度ADC前端时，一个绕不开的坎就是精密分压器。你可能在设计一个需要0.1%甚至更高精度的分压网络，但手头的万用表…...
厨房空调技术白皮书：从风冷到水冷，制冷系统在厨房场景中的工程化演进
厨房空调是暖通行业近三年技术迭代最密集的细分品类。从最初的"凉霸"（本质是风扇），到风冷分体式，再到水冷一体式，每代技术都在解决上一代没有覆盖的用户痛点。本文以工程技术视角，梳理四代厨房制…...
Unity iOS构建报错SDK version is 0的根因与精准修复
1. 这个报错不是Unity在“发脾气”，而是工程配置在“装死”刚接手一个老项目，打开Unity编辑器，点Build Settings准备打包iOS，结果弹出一行红字：“SDK version is 0, cannot build”。我第一反应是——这什么鬼…...
如何用Python脚本榨干百度网盘带宽：pan-baidu-download终极指南
如何用Python脚本榨干百度网盘带宽：pan-baidu-download终极指南 【免费下载链接】pan-baidu-download 百度网盘下载脚本 项目地址: https://gitcode.com/gh_mirrors/pa/pan-baidu-download 在数字时代，百度网盘已成为我们存储和分享大型文件的默认…...
3分钟开启PC游戏分屏派对：NucleusCoop让单机游戏秒变多人同屏神器
3分钟开启PC游戏分屏派对：NucleusCoop让单机游戏秒变多人同屏神器 【免费下载链接】nucleuscoop Starts multiple instances of a game for split-screen multiplayer gaming! 项目地址: https://gitcode.com/gh_mirrors/nu/nucleuscoop 还在为热门PC游戏不支…...
在模型广场灵活选型让我找到了更适合代码生成的Taotoken模型
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 在模型广场灵活选型让我找到了更适合代码生成的Taotoken模型 开发代码辅助工具时，选择合适的模型是平衡效果与成本的关…...
DLA功耗优化验证：tegrastats实战指南
重磅预告：本专栏将独家连载系列丛书《智能体视觉技术与应用》部分精华内容，该书是世界首套系统阐述“因式智能体”视觉理论与实践的专著，特邀美国 TypeOne 公司首席科学家、斯坦福大学博士 Bohan 担任技术顾问。Bohan先生师从美国三院院士、“…...
独立开发者利用taotoken模型广场为不同任务选择性价比最优模型
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 独立开发者利用taotoken模型广场为不同任务选择性价比最优模型 对于独立开发者而言，在有限的预算内高效完成多样化的开…...