【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将倾斜的扫描文档图像进行水平矫正。 解决思路 因为扫描图像中的大部分文字倾斜后，同一行文字也在同一条直线，所以可以通过拟合直线来计算文本倾斜角度，…...
基于算法竞赛的c++编程（28）结构体的进阶应用
结构体的嵌套与复杂数据组织 在C中，结构体可以嵌套使用，形成更复杂的数据结构。例如，可以通过嵌套结构体描述多层级数据关系： struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...
使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式
一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明：假设每台服务器已…...
使用rpicam-app通过网络流式传输视频)
树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频
使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源： http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...
云启出海，智联未来｜阿里云网络「企业出海」系列客户沙龙上海站圆满落地
借阿里云中企出海大会的东风，以**「云启出海，智联未来｜打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办，现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...
【第二十一章 SDIO接口(SDIO)】
第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...
【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）
可以使用Sqliteviz这个网站免费编写sql语句，它能够让用户直接在浏览器内练习SQL的语法，不需要安装任何软件。 链接如下： sqliteviz 注意： 在转写SQL语法时，关键字之间有一个特定的顺序，这个顺序会影响到…...
2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面
代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口（适配服务端返回 Token） export const login async (code, avatar) > {const res await http…...
第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明
AI 领域的快速发展正在催生一个新时代，智能代理（agents）不再是孤立的个体，而是能够像一个数字团队一样协作。然而，当前 AI 生态系统的碎片化阻碍了这一愿景的实现，导致了“AI 巴别塔问题”——不同代理之间…...
土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等
🔍 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术，可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势，还能有效评价重大生态工程…...
Axios请求超时重发机制
Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式： 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...