【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将倾斜的扫描文档图像进行水平矫正。 解决思路 因为扫描图像中的大部分文字倾斜后，同一行文字也在同一条直线，所以可以通过拟合直线来计算文本倾斜角度，…...
Flask RESTful 示例
目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题： 下面创建一个简单的Flask RESTful API示例。首先，我们需要创建环境，安装必要的依赖，然后…...
mongodb源码分析session执行handleRequest命令find过程
mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程，并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令，把数据流转换成Message，状态转变流程是：State::Created 》 St…...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
前端导出带有合并单元格的列表
// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...
MVC 数据库
MVC 数据库 引言 在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...
基于 TAPD 进行项目管理
起因 自己写了个小工具，仓库用的Github。之前在用markdown进行需求管理，现在随着功能的增加，感觉有点难以管理了，所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD，需要提供一个企业名新建一个项目&#…...
【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变（硬件篇）
本项目是基于 STM32F103C8T6 微控制器的 SPWM（正弦脉宽调制）电源模块，能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路，图中 D1 为二极管， 其目的是防止正负极电源反接， …...
【从零学习JVM|第三篇】类的生命周期(高频面试题)
前言： 在Java编程中，类的生命周期是指类从被加载到内存中开始，到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期，让读者对此有深刻印象。 目录 …...
vulnyx Blogger writeup
信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面，gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress，说明目标所使用的cms是wordpress，访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...
LRU 缓存机制详解与实现（Java版） + 力扣解决
📌 LRU 缓存机制详解与实现（Java版） 一、📖 问题背景 在日常开发中，我们经常会使用 缓存（Cache） 来提升性能。但由于内存有限，缓存不可能无限增长，于是需要策略决定&am…...