【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将倾斜的扫描文档图像进行水平矫正。 解决思路 因为扫描图像中的大部分文字倾斜后，同一行文字也在同一条直线，所以可以通过拟合直线来计算文本倾斜角度，…...
谷歌浏览器插件
项目中有时候会用到插件 sync-cookie-extension1.0.0：开发环境同步测试 cookie 至 localhost，便于本地请求服务携带 cookie 参考地址：https://juejin.cn/post/7139354571712757767 里面有源码下载下来，加在到扩展即可使用FeHelp…...
linux 下常用变更-8
1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行，YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID： YW3…...
ArcGIS Pro制作水平横向图例+多级标注
今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作：ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等（ArcGIS出图图例8大技巧），那这次我们看看ArcGIS Pro如何更加快捷的操作。…...
今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存
文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...
SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题
分区配置 (ptab.json) img 属性介绍： img 属性指定分区存放的 image 名称，指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件，则以 proj_name:binary_name 格式指定文件名， proj_name 为工程 名&…...
跨平台商品数据接口的标准化与规范化发展路径：淘宝京东拼多多的最新实践
在电商行业蓬勃发展的当下，多平台运营已成为众多商家的必然选择。然而，不同电商平台在商品数据接口方面存在差异，导致商家在跨平台运营时面临诸多挑战，如数据对接困难、运营效率低下、用户体验不一致等。跨平台商品数据接口的标准…...
如何做好一份技术文档？从规划到实践的完整指南
如何做好一份技术文档？从规划到实践的完整指南 🌟 嗨，我是IRpickstars！ 🌌 总有一行代码，能点亮万千星辰。 🔍 在技术的宇宙中，我愿做永不停歇的探索者。 ✨ 用代码丈量世界&…...
Python异步编程：深入理解协程的原理与实践指南
💝💝💝欢迎莅临我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。 持续学习，不断…...
SQLSERVER-DB操作记录
在SQL Server中，将查询结果放入一张新表可以通过几种方法实现。 方法1：使用SELECT INTO语句 SELECT INTO 语句可以直接将查询结果作为一个新表创建出来。这个新表的结构（包括列名和数据类型）将与查询结果匹配。 SELECT * INTO 新…...
Docker 镜像上传到 AWS ECR：从构建到推送的全流程
一、在 EC2 实例中安装 Docker（适用于 Amazon Linux 2） 步骤 1：连接到 EC2 实例 ssh -i your-key.pem ec2-useryour-ec2-public-ip步骤 2：安装 Docker sudo yum update -y sudo amazon-linux-extras enable docker sudo yum in…...