【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="512px" height="512px" style="border:1px dotted black;">如果看到这段文字说您的浏览器尚不支持HTML5 Canvas,请更换浏览器再试.</canvas></div></body>
</html>
<script type="text/javascript">
<!--
/*****************************************************************
* 将全体代码(从<!DOCTYPE到script>)拷贝下来,粘贴到文本编辑器中,
* 另存为.html文件,再用chrome浏览器打开,就能看到实现效果。
******************************************************************/// canvas的绘图环境
var ctx;// 边长
const WIDTH=1000;
const HEIGHT=500;// 舞台对象
var stage;//-------------------------------
// 初始化
//-------------------------------
function init(){// 获得canvas对象var canvas=document.getElementById('myCanvas');  canvas.width=WIDTH;canvas.height=HEIGHT;// 初始化canvas的绘图环境ctx=canvas.getContext('2d');  ctx.translate(WIDTH/2,HEIGHT/2);// 原点平移到画布中央// 准备stage=new Stage();    stage.init();// 开幕animate();
}// 播放动画
function animate(){    stage.update();    stage.paintBg(ctx);stage.paintFg(ctx);     // 循环if(true){window.requestAnimationFrame(animate);   }
}// 舞台类
function Stage(){// 转角this.angle=0;// 准备齿轮数组this.gearArr=[];// 初始化this.init=function(){for(var i=0;i<36;i++){var theta=Math.PI/18*i-Math.PI/36;var x1=150*Math.cos(theta);var y1=150*Math.sin(theta);var x2=140*Math.cos(theta);var y2=140*Math.sin(theta);if(i%2==0){this.gearArr.push({x:x1,y:y1});this.gearArr.push({x:x2,y:y2});}else{                this.gearArr.push({x:x2,y:y2});this.gearArr.push({x:x1,y:y1});}}}// 更新this.update=function(){this.angle+=Math.PI/180;}// 画背景this.paintBg=function(ctx){ctx.clearRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);// 清屏        }// 画前景this.paintFg=function(ctx){// 画黄齿轮ctx.save();        ctx.translate(-150,0);ctx.rotate(-this.angle);ctx.beginPath();for(var i=0;i<this.gearArr.length;i++){ctx.lineTo(this.gearArr[i].x,this.gearArr[i].y);}ctx.closePath();ctx.fillStyle="yellow";ctx.fill();ctx.font="30px consolas";ctx.textAlign="center";ctx.textBaseLine="Middle";ctx.fillStyle="white";ctx.fillText("逆火原创",0,0);ctx.restore();// 画紫齿轮ctx.save();ctx.translate(140,0);ctx.rotate(this.angle+Math.PI/18);ctx.beginPath();for(var i=0;i<this.gearArr.length;i++){ctx.lineTo(this.gearArr[i].x,this.gearArr[i].y);}ctx.closePath();ctx.fillStyle="purple";ctx.fill();ctx.font="30px Arial";ctx.textAlign="center";ctx.textBaseLine="Middle";ctx.fillStyle="white";ctx.fillText("逆火原创",0,0);ctx.restore();}
}/*---------------------------------------------
风雪压我两三年,我笑风轻雪如棉。
----------------------------------------------*/
//-->
</script>

END

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

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

相关文章

WIFI驱动移植实验:连接WIFI热点

一. 简介 前一篇文章做了WIFI联网前的工作&#xff0c;文章如下&#xff1a; WIFI驱动移植实验&#xff1a;WIFI 联网前的工作-CSDN博客 本文在上面一篇文章工作实现的基础上&#xff0c;实现 WIFI的连接。 二. WIFI驱动移植实验&#xff1a;WIFI 联网测试 这里WIFI联网的…

什么是量子计算?

什么是量子计算&#xff1f; 量子计算机仍处于起步阶段&#xff0c;正在影响已经在经典计算机上运行的新一代模拟&#xff0c;现在使用 NVIDIA cuQuantum SDK 进行加速。 在史蒂夫乔布斯 (Steve Jobs) 推出可以放入口袋的计算机之前 27 年&#xff0c;物理学家保罗贝尼奥夫 (P…

深入理解数据结构第一弹——二叉树(1)——堆

前言&#xff1a; 在前面我们已经学习了数据结构的基础操作&#xff1a;顺序表和链表及其相关内容&#xff0c;今天我们来学一点有些难度的知识——数据结构中的二叉树&#xff0c;今天我们先来学习二叉树中堆的知识&#xff0c;这部分内容还是非常有意思的&#xff0c;下面我们…

3D密集面部对齐项目 | 基于Pytorch实现的快速+准确+稳定的3D面部对齐算法

项目应用场景 可以应用于人脸面部三维特征点的提取 人脸面部的三维重建&#xff0c;项目的特点是基于 Pytorch 实现、快速、准确、稳定 项目效果&#xff1a; 项目流程 > 具体参见项目内README.md (1) 构建 sh ./build.sh (2) 执行示例 # 1. running on still i…

持续交付与持续部署相关概念(CD)

目录 一、概述 二、持续交付基本概念 2.1 持续交付的含义 2.1.1 项目管理的视角 2.1.2 产品研发的视角 2.1.3 总结 2.2 持续交付涉及的运作环境 2.2.1 开发环境 2.2.2 测试环境 2.2.3 UAT环境 2.2.4 准生产环境 2.2.5 生产环境 2.3 总结 三、持续部署基本概念 3.…

redis对象list

Redis List是一组连接起来的字符串集合。 写操作&#xff1a; LPUSH 语法:LPUSH key value [value …] 功能:从头部增加元素,返回值为List中元素的总数。 RPUSH 语法:RPUSH key value [value …] 功能:从尾部增加元素,返回值为List中元素的总数。 LPOP 语法:LPOP key 功能…

用Python实现办公自动化(自动化处理Excel工作簿)

自动化处理Excel工作簿 &#xff08;一&#xff09;批量生产产品出货清单 以“出货统计表”为例&#xff0c; 需求&#xff1a;将出货记录按照出货日期分类整理成多张出货清单 “出货统计表数据案例” “产品出货清单模板” 1.提取出货统计表的数据 “Python程序代码” # 使用…

安全SCDN的威胁情报库对DDOS防护有什么好处

目前网络攻击事件频频发生&#xff0c;DDoS&#xff08;分布式拒绝服务&#xff09;攻击已成为各种企业&#xff08;小到区域性小公司大到各种跨国公司&#xff09;的主要威胁&#xff0c;DDoS 攻击可能会对企业造成重大损害和破坏&#xff0c;比如对目标公司的业务造成产生不利…

C#使用SQLite(含加密)保姆级教程

C#使用SQLite 文章目录 C#使用SQLite涉及框架及库复制runtimes创建加密SQLite文件生成连接字串执行SQL生成表SQLiteConnectionFactory.cs 代码结构最后 涉及框架及库 自己在NuGet管理器里面安装即可 Chloe.SQLite&#xff1a;ORM框架Microsoft.Data.Sqlite.Core&#xff1a;驱…

React Native框架开发APP,安装免费的图标库(react-native-vector-icons)并使用详解

一、安装图标库 要使用免费的图标库&#xff0c;你可以使用 React Native Vector Icons 库。 首先&#xff0c;确保你已经安装了 react-native-vector-icons&#xff1a; npm install --save react-native-vector-iconsnpm install --save-dev types/react-native-vector-ic…

并发编程之CountDownLatch和CyclicBarrier的详细解析(带小案例)

CountDownLatch 倒计时锁存器 用来解决线程执行次序的问题 CountDownLatch主要有两个方法&#xff0c;当一个或多个线程调用await方法时&#xff0c;这些线程会阻塞。 其它线程调用countDown方法会将计数器减1(调用countDown方法的线程不会阻塞)&#xff0c; 当计数器的值变为…

云服务器8核32G配置租用优惠价格94元/月、1362元一年

8核32G云服务器京东云轻量云主机价格94元1个月、282元3个月、673元6个月、1362元一年&#xff0c;配置8C32G-100G SSD系统盘-10M带宽-2000G月流量 华北-北京&#xff0c;京东云优惠活动 yunfuwuqiba.com/go/jd 活动链接打开如下图&#xff1a; 8核32G云服务器京东云轻量云主机价…

CSS(三)---【盒子模型、边框、外边距合并】

零.前言 本篇主要介绍CSS中最重要的一种概念模型&#xff1a;“盒子模型”。 关于CSS的更多内容&#xff0c;可以查看作者之前的文章&#xff1a; CSS(一)---【CSS简介、导入方式、八种选择器、优先级】-CSDN博客 CSS(二)---【常见属性、复合属性使用】-CSDN博客 一.盒子模…

WebCopilot:一款功能强大的子域名枚举和安全漏洞扫描工具

关于WebCopilot WebCopilot是一款功能强大的子域名枚举和安全漏洞扫描工具&#xff0c;该工具能够枚举目标域名下的子域名&#xff0c;并使用不同的开源工具检测目标存在的安全漏洞。 工具运行机制 WebCopilot首先会使用assetsfinder、submaster、subfinder、accumt、finddom…

Jamba:AI21 实验室发布首个应用级的 Mamba 架构 AI 模型

AI21 实验室发布了 Jamba&#xff0c;这是全球首个基于 Mamba 架构的、可用于实际应用的 AI 模型。目前大多数模型&#xff08;例如 GPT、Gemini 和 Llama&#xff09;都基于 Transformer 架构。Jamba 结合了 Mamba 结构化状态空间模型 (SSM) 和传统 Transformer 架构的优点&am…

属性选择器

1.[title]{background:yellow;}&#xff1a;所有带title标签设置成黄色 2.div[class]{background:yellow;}&#xff1a;所有div中带class标签设置成黄色 3.div[classbox1]{border:1px solid blue; }&#xff1a;div中包含class并且classbox1的设置成蓝边框 4. class…

Postman Tests设置Global读取不是最新值,跟Tests执行顺序有关(踩坑笔记)

前言 在执行Run Collection的时候&#xff0c;发现设置的全局变量每次读取都是旧值&#xff0c;没有读取到最新的值。 背景 有2个地方需要动态参数&#xff0c;一个URL&#xff0c;一个Body&#xff0c;因此需要设置Tests脚本。 url动态参数 url&#xff1a;动态参数projec…

【Java】打包:JAR、EAR、WAR

打包&#xff1a;JAR、EAR、WAR war 是一个 Web 模块&#xff0c;其中需要包括 WEB-INF&#xff0c;是可以直接运行的 WEB 模块。而 jar 一般只是包括一些 class 文件&#xff0c;在声明了 main_class 之后是可以用 java 命令运行的。 它们都是压缩的包&#xff0c;拿 Tomcat …

【基于springboot分析Quartz(v2.3.2)的启动流程】

基于springboot分析Quartz&#xff08;v2.3.2&#xff09;的启动流程 最近公司的定时任务使用了Quartz框架&#xff0c;在开发中经常出现定任务不执行了的问题&#xff0c;但是我又找不到原因所在&#xff0c;可把我愁坏了。于是我决定看看Quartz框架是怎么调度任务的。&#x…

C# wpf 实现底部嵌入HwndHost

WPF Hwnd窗口互操作系列 第一章 嵌入Hwnd窗口 第二章 嵌入WinForm控件 第三章 嵌入WPF控件 第四章 底部嵌入HwndHost&#xff08;本章&#xff09; 文章目录 WPF Hwnd窗口互操作系列前言一、如何实现&#xff1f;1、底部创建窗口&#xff08;1&#xff09;、创建透明窗口&…