当前位置： 首页 > news >正文

【Canvas与色彩】十六等分多彩隔断圆环

news 2025/7/7 9:14:18

【成图】

【代码】

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head><title>隔断圆环Draft5十六等分多彩</title><style type="text/css">.centerlize{margin:0 auto;width:1200px;}</style></head><body οnlοad="init();"><div class="centerlize"><canvas id="myCanvas" width="12px" height="12px" style="border:1px dotted black;">如果看到这段文字说您的浏览器尚不支持HTML5 Canvas，请更换浏览器再试.</canvas></div></body>
</html>
<script type="text/javascript">
<!--
/*****************************************************************
* 将全体代码(从<!DOCTYPE到script>)拷贝下来，粘贴到文本编辑器中，
* 另存为.html文件，再用chrome浏览器打开，就能看到实现效果。
******************************************************************/// canvas的绘图环境
var ctx;// 高宽
const WIDTH=512;
const HEIGHT=512;// 舞台对象
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){//sleep(100);window.requestAnimationFrame(animate);   }
}// 舞台类
function Stage(){// 初始化this.init=function(){}// 更新this.update=function(){    }// 画背景this.paintBg=function(ctx){ctx.clearRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);// 清屏    }// 画前景this.paintFg=function(ctx){// 底色ctx.save();ctx.fillStyle = "white";ctx.fillRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);ctx.restore();const R=210;// 基准尺寸ctx.save();var W=3;// 扇形间隔的一半var N=16;// 多少扇var PART=Math.PI*2/N;// 每扇角度var colors=["rgb(245,232,55)","rgb(182,211,48)","rgb(115,182,43)","rgb(71,156,55)","rgb(24,154,66)","rgb(6,113,95)","rgb(0,95,123)","rgb(0,76,144)","rgb(69,60,149)","rgb(62,40,104)","rgb(118,47,123)","rgb(167,34,97)","rgb(193,36,63)","rgb(218,75,33)","rgb(226,148,37)","rgb(228,179,40)",];// 十六颜色数组for(var j=0;j<7;j++){var rOut=R*1.0-j*25;// 外径var rIn=rOut-20;// 内径            var biasOut=Math.sin(W/rOut);// 外径偏移角var biasIn=Math.sin(W/rIn);// 内径偏移角for(var i=0;i<N;i++){var theta=Math.PI*2/N*i;var r=rOut;var angle=theta+biasOut;var a=createPt(r*Math.cos(angle),r*Math.sin(angle));r=rOut;angle=theta+PART-biasOut;var b=createPt(r*Math.cos(angle),r*Math.sin(angle));r=rIn;angle=theta+PART-biasOut;var c=createPt(r*Math.cos(angle),r*Math.sin(angle));r=rIn;angle=theta+biasOut;var d=createPt(r*Math.cos(angle),r*Math.sin(angle));// 上色ctx.fillStyle=colors[i];ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.arc(0,0,rOut,theta+biasOut,theta+PART-biasOut,false);ctx.lineTo(b.x,b.y);                ctx.lineTo(c.x,c.y);ctx.arc(0,0,rIn,theta+PART-biasOut,theta+biasOut,true);ctx.lineTo(d.x,d.y);                ctx.closePath();ctx.fill();}}        ctx.restore();writeText(ctx,WIDTH/2-30,HEIGHT/2-5,"逆火制图","8px consolas","lightgrey");// 版权}
}/*----------------------------------------------------------
函数:用于绘制实心圆
ctx:绘图上下文
x:矩形中心横坐标
y:矩形中心纵坐标
r:圆半径
style:填充圆的方案
----------------------------------------------------------*/
function drawSolidCircle(ctx,x,y,r,style){ctx.fillStyle=style;ctx.beginPath();ctx.arc(x,y,r,0,Math.PI*2,false);ctx.closePath();ctx.fill();
}/*----------------------------------------------------------
函数:创建一个二维坐标点
x:横坐标
y:纵坐标
Pt即Point
----------------------------------------------------------*/
function createPt(x,y){var retval={};retval.x=x;retval.y=y;return retval;
}/*----------------------------------------------------------
函数:延时若干毫秒
milliseconds:毫秒数
----------------------------------------------------------*/
function sleep(milliSeconds) {const date = Date.now();let currDate = null;while (currDate - date < milliSeconds) {currDate = Date.now();} 
}/*----------------------------------------------------------
函数:书写文字
ctx:绘图上下文
x:横坐标
y:纵坐标
text:文字
font:字体
color:颜色
----------------------------------------------------------*/
function writeText(ctx,x,y,text,font,color){ctx.save();ctx.textBaseline="bottom";ctx.textAlign="center";ctx.font = font;ctx.fillStyle=color;ctx.fillText(text,x,y);ctx.restore();
}/*-------------------------------------------------------------
衣敝缊袍,与衣狐貉者立,而不耻者,其由也与？
--------------------------------------------------------------*/
//-->
</script>

END

相关文章：

【Canvas与色彩】十六等分多彩隔断圆环

【成图】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>隔断圆环Draft5十六等分多彩</title><style type"text…...

编程日记 2024/10/7 7:29:46

什么是pip? -- Python 包管理工具

前言 不同的编程语言通常都有自己的包管理工具&#xff0c;这些工具旨在简化项目的依赖管理、构建过程和开发效率&#xff0c;同时促进代码的复用和共享。每个包管理工具都有其独特的特点和优势&#xff0c;开发者可以根据自己的编程语言和项目需求选择合适的包管理工具。 pip是…...

编程日记 2024/10/7 7:28:45

FastAPI框架使用枚举来型来限定参数、FastApi框架隐藏没多大意义的Schemes模型部分内容以及常见的WSGI服务器Gunicorn、uWSGI了解

一、FastAPI框架使用枚举来型来限定参数 FastAPI框架验证时&#xff0c;有时需要通过枚举的方式来限定参数只能为某几个值中的一个&#xff0c;这时就可以使用FastAPI框架的枚举类型Enum了。publish:December 23, 2020 -Wednesday 代码如下&#xff1a; #引入Enum模块 from fa…...

编程日记 2024/10/7 7:27:44

OceanBase—02（入门篇——对于单副本单节点，由1个observer扩容为3个observer集群）——之前的记录，当初有的问题未解决，目前新版未尝试

OceanBase—02&#xff08;入门篇——对于单副本单节点&#xff0c;由1个observer扩容为3个observer集群&#xff09;——之前的记录&#xff0c;有的问题未解决&#xff0c;新版未尝试 1、前言—安装单副本单节点集群1.1 docker安装OB 2、查看现有集群情况2.1 进入容器&#x…...

编程日记 2024/10/7 7:26:42

前沿论文创新点集合

系列文章目录 文章目录 系列文章目录一、《LAMM: Label Alignment for Multi-Modal Prompt Learning》二、《MaPLe: Multi-modal Prompt Learning》三、《Learning to Prompt for Vision-Language Models》CoOp四、《MobileCLIP: Fast Image-Text Models through Multi-Modal R…...

编程日记 2024/10/7 7:23:40

刷题记录（好题）

Problem - D - Codeforces 思路&#xff1a; 滑动窗口思想&#xff0c;一个数组记录起始点&#xff08;记录出现过的次数&#xff09;&#xff0c;另一个数组记录截至点&#xff08;记录出现过的次数&#xff09;&#xff0c;从0开始遍历&#xff0c;设定一个长度为d的滑动窗口…...

编程日记 2024/10/7 7:22:39

【大数据入门 | Hive】函数{单行函数，集合函数，炸裂函数，窗口函数}

1. 函数简介&#xff1a; Hive会将常用的逻辑封装成函数给用户进行使用&#xff0c;类似于Java中的函数。 好处&#xff1a;避免用户反复写逻辑&#xff0c;可以直接拿来使用。 重点&#xff1a;用户需要知道函数叫什么&#xff0c;能做什么。 Hive提供了大量的内置函数&am…...

编程日记 2024/10/7 7:19:35

python sqlite3 工具函数

起因&#xff0c; 目的: sqlite3 最常用的函数。 比如&#xff0c;某人给了一个 database.db 文件。 但是你登录的时候&#xff0c;不知道账号密码。 此文件就是&#xff0c;查看这个数据库的详细内容。 有哪些表某个表的全部内容。添加数据 代码&#xff0c; 见注释 impor…...

编程日记 2024/10/7 7:17:33

顺丰Android面试题集锦及参考答案

TCP 三次握手和四次挥手是什么，挥手过程中主动方的状态是什么？ TCP 三次握手是建立连接的过程： 第一次握手：客户端向服务器发送一个 SYN 报文，该报文包含客户端的初始序列号（seq=x）。此时客户端进入 SYN_SENT 状态。第二次握手：服务器收到客户端的 SYN 报文后，向客户端…...

编程日记 2024/10/7 7:16:32

uniapp中检测应用更新的两种方式-升级中心之uni-upgrade-center-app

uniapp一个很是用的功能&#xff0c;就是在我们发布新版本的app后&#xff0c;需要提示用户进行app更新&#xff0c;并告知用户我们新版的app更新信息&#xff0c;以使得用户能及时使用上我们新开发的功能&#xff0c;提升用户的实用度和粘性。注意:这个功能只能在app端使用 效…...

编程日记 2024/10/7 7:04:19

Python爬虫通过 Cookie 和会话管理来维持其在网站上的会话状态

Python 爬虫虽然是一个热门且非常实用的技术领域&#xff0c;但在实际开发中&#xff0c;确实存在一些困难的地方。以下是 Python 爬虫开发中常见的难点和挑战&#xff1a; 1. 处理反爬虫机制 许多网站为防止爬虫的恶意访问&#xff0c;采取了各种反爬虫措施。常见的反爬虫技…...

编程日记 2024/10/7 7:03:18

使用STM32单片机实现无人机控制系统

无人机控制系统是无人机的大脑&#xff0c;负责处理无人机的姿态控制、导航和通信等功能。本文将详细介绍如何使用STM32单片机实现无人机控制系统&#xff0c;包括硬件设计、软件设计、系统调试与测试等内容。 一、系统概述 无人机控制系统通常包括飞行控制器、传感器、执行器…...

编程日记 2024/10/7 7:00:16

【包教包会】2D图片实现3D透视效果（支持3.x、支持原生、可合批）

将去年写的SpriteFlipper从2.x升级到3.x。 如果需要2.x版本或需要了解算法思路&#xff0c;请移步&#xff1a;https://blog.csdn.net/weixin_42714632/article/details/136745051 优化功能&#xff1a;可同时绕X轴和Y轴旋转&#xff0c;两者效果会叠加。 完美适配Web、原生…...

编程日记 2024/10/7 6:59:15

解决nginx+tomcat宕机完美解决方案

问题描述&#xff1a;公司项目太老了&#xff0c;还是tomcat项目&#xff0c;部署两台tomcat,做了nginx负载。最近发现每到上午10&#xff0c;下午3点&#xff0c;tomcat就宕机了&#xff0c;死活找不到原因&#xff0c;客户影响超期差&#xff0c;实在让人头疼。 解决思路&am…...

编程日记 2024/10/7 6:55:11

第十一章 缓存之更新/穿透/雪崩/击穿

目录 一、什么是缓存 二、缓存更新策略 2.1. 缓存主动更新策略 2.1.1. Cache Aside模式&#xff08;主流&#xff09;‌ 2.1.2. Read/Write Through模式‌ 2.1‌.3. Write Behind模式‌ 2.1.4. 总结 三、缓存穿透 四、缓存雪崩 五、缓存击穿 5.1. 互斥锁实现 5.1.1…...

编程日记 2024/10/7 6:53:08

一款完全开源并免费的监测与分析系统，支持监测，预警，分析，报告，支持本地化部署（附源码）

前言 在当今这个信息爆炸的时代&#xff0c;企业和个人都需要时刻了解网络上的动态&#xff0c;以便及时了解自身品牌形象和社会舆论的变化。然而&#xff0c;现有的舆情监测工具往往价格昂贵&#xff0c;且cao作复杂&#xff0c;难以满足普通用户的需求。 在这种背景下&…...

编程日记 2024/10/7 6:51:06

python中时间函数及其应用

近段时间&#xff0c;因在改写以前写的学校自动铃声控制系统&#xff0c;又学到了一些新的知识&#xff0c;特记录如下&#xff1a; 一、时间函数基础 1、time模块中的函数及其用法 time.time(): 返回当前时间的时间戳&#xff0c;即自1970年1月1日以来的秒数。 time.localt…...

编程日记 2024/10/7 6:50:05

MoveIt2-humble】入门教程----第一个 C++ MoveIt 程序

四节教程会手把手带你写一个完整的 Moveit 控制程序&#xff0c;包括轨迹规划、RViz可视化、添加碰撞物体、抓取和放置。 1 创建依赖包 进入到教程所在工作空间下的src目录&#xff0c;创建一个新的依赖包。 ros2 pkg create \--build-type ament_cmake \--dependencies mov…...

编程日记 2024/10/7 6:49:03

watch命令：周期执行指定命令

一、命令简介 ​watch ​命令用于周期性地执行指定的命令&#xff0c;并显示其输出结果。 ‍ 二、命令参数 2.1 命令格式 watch [选项] 命令2.2 选项 ​-n, --interval​: 指定更新间隔时间&#xff08;以秒为单位&#xff09;。默认间隔时间为 2 秒。​-d, --difference…...

编程日记 2024/10/7 6:48:02

【ADC】噪声（1）噪声分类

概述 本文学习于TI 高精度实验室课程&#xff0c;总结 ADC 的噪声分类&#xff0c;并简要介绍量化噪声和热噪声。 文章目录 概述一、ADC 中的噪声类型二、量化噪声三、热噪声四、量化噪声与热噪声对比 一、ADC 中的噪声类型 ADC 固有噪声由两部分组成&#xff1a;第一部分是量…...

编程日记 2024/10/7 6:47:01

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

编程新知 2025/7/6 0:29:09

日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

编程新知 2025/7/6 6:27:41

stm32G473的flash模式是单bank还是双bank？

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

编程新知 2025/6/28 11:42:05

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

编程新知 2025/7/6 20:56:11

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

编程新知 2025/7/4 10:49:50

在Ubuntu中设置开机自动运行（sudo）指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

编程新知 2025/6/18 4:00:59

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

编程新知 2025/6/21 8:18:07

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

编程新知 2025/7/6 3:25:33

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...

编程新知 2025/6/26 11:27:05

IP如何挑？2025年海外专线IP如何购买？

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

编程新知 2025/6/21 6:34:03