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

【成图】

【代码】

<!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

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

BFS解决FloodFill算法_被围绕的区域_C++

BFS解决FloodFill算法_被围绕的区域_C 1. 题目描述2. 算法分析3. 代码实现 1. 题目描述 leetcode链接&#xff1a;https://leetcode.cn/problems/surrounded-regions/description/ 给你一个m x n的矩阵board&#xff0c;由若干字符X和O组成&#xff0c;捕获 所有 被围绕的区域…

数据结构 ——— 单链表oj题:链表的回文结构

目录 题目要求 手搓简易单链表 代码实现 题目要求 对于一个单链表&#xff0c;设计一个时间复杂度为O(N)&#xff0c;空间复杂度为O(1)的算法&#xff0c;判断其是否为回文结构&#xff0c;给定一个链表的头指针 head&#xff0c;返回一个 bool 值&#xff0c;代表其是否为…

矩阵式键盘接口设计(用单片机读取4x4矩阵式键盘的键号,并将其显示在数码管上)(Proteus 与Keil uVision联合仿真)

一、实验原理 1、分析电路中按键状态检测的方法。 矩阵式&#xff08;也称行列式&#xff09;键盘用于按键数目较多的场合&#xff0c;由行线和列线组成&#xff0c;按键位于行、列交叉点上&#xff0c;见图5-26&#xff0c;一个44的行、列结构可以构成一个16个按键的键盘&…

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

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

一张图片生成数字人的3D发型:技术创新与应用前景

随着人工智能(AI)和计算机图形学的不断进步,从单张肖像图像生成3D数字头发的技术正在变得越来越成熟。这项技术不仅能够处理复杂的编织和未编织发型,还能在虚拟现实、电影制作和美容行业中找到广泛的应用。本文将详细介绍一种创新的3D头发重建技术,探讨其关键特性、技术创…

Dit架构 diffusion范式分类+应用

1.ping 网址 2.ssh nscc/l20 3.crtl,打开vscode的setting 4.win 10修改ssh配置文件及其密钥权限为600 - 晴云孤魂 - 博客园 整体来看&#xff1a; 使用transformer作为其主干网络&#xff0c;代替了原先的UNet 在latent space进行训练&#xff0c;通过transformer处理潜…

搬砖 网盘一键转存源码

网盘一键转存源码&#xff0c;免费资源没测试 网盘一键转存源码&#xff0c;可以将您的百度网盘资源一键转存到。并支持后台设置开屏广告 源码截图&#xff1a; 下载地址&#xff1a; https://yuncv.lanzouw.com/i8dZk2btyl4h

04. maven 三种项目打包方式 pom、jar、war 的区别(记一次 Spring 项目启动报错)

文章目录 1. 记一次 Spring 项目启动报错1.1 现象1.2 分析1.3 过程复现 2. maven 项目三种打包方式的区别 1. 记一次 Spring 项目启动报错 1.1 现象 我在项目下创建了一个子模块&#xff0c;然后又将该子模块移除&#xff0c;之后启动报错&#xff0c;如下&#xff1a; com.…

深入理解 Java 对象的内存布局

对于 Java 虚拟机&#xff0c;都知道其内存区域划分成&#xff1a;堆、方法区、虚拟机栈等区域。但一个对象在 Java 虚拟机中是怎样存储的&#xff0c;相信很少人会比较清楚地了解。Java 对象在 JVM 中的内存布局&#xff0c;是了解并发编程同步机制的基础。 在 HotSpot 虚拟机…

通信工程学习:什么是IOT物联网

IOT&#xff1a;物联网 IOT物联网&#xff08;Internet of Things&#xff0c;简称IoT&#xff09;是一种通过信息传感设备&#xff0c;按约定的协议&#xff0c;将任何物体与网络相连接&#xff0c;以实现智能化识别、定位、跟踪、监管等功能的技术体系。以下是对IOT物联网的详…

Windows 通过 Docker 安装 GitLab

1. 安装 Docker Desktop 下载网站&#xff1a;Windows | Docker Docs 2. 拉取 GitLab Docker 镜像 打开 PowerShell 或 命令提示符&#xff0c;拉取 GitLab 镜像&#xff1a; docker pull gitlab/gitlab-ee:latest或则使用社区版&#xff1a; docker pull gitlab/gitlab-ce…

电脑无法无线投屏的解决办法

在前司的时候经常遇到电脑无法使用无线投屏器的情况&#xff0c;今天就来聊聊如何解决。 1.不会连接。这种情况&#xff0c;经常发生在WIN10升级WIN11之后&#xff0c;一般是两种办法&#xff0c;一种是同时按键盘上的WINDOWS和K键&#xff0c;右下角就会出来连接的图标&#…

showdoc二次开发

showdoc用的vue版本老&#xff0c;需要安装老版本nodejs&#xff0c;比如node 14.21.3 win32-x64-93_binding.node问题 https://github.com/sass/node-sass/releases 下载 web_src\node_modules\node-sass\vendor\win32-x64-93 下面重命名为binding.node 代理到php后端&…

2-114 基于matlab的CA模型

基于matlab的CA模型&#xff0c;Singer模型对单机动目标进行跟踪算法&#xff0c;具有10页实验文档。采用蒙特卡罗方法对一个二坐标雷达对一平面上运动的目标进行观测&#xff0c;得到跟踪滤波结果。程序已调通&#xff0c;可直接运行。 下载源程序请点链接&#xff1a;2-114 …

Crypto虐狗记---”你“和小鱼(八)

前言&#xff1a;剧情八 提示&#xff1a; 下载&#xff1a; 只给了公钥 那么可以用RsaCtfTool去分离公钥---》 得到(e&#xff0c;n)&#xff1a; 如何安装参考&#xff1a; kail下安装RsaCtfTool - 九皋777 - 博客园 (cnblogs.com) 已知n&#xff0c;那么去得到p q 或者使…

OBOO鸥柏丨深圳科学展馆引入液晶拼接屏中控宣传协议互动大屏

科技馆的展厅展区&#xff0c;宛如一扇通往未来世界的璀璨窗口&#xff0c;巧妙融合了OBOO鸥柏LCD液晶拼接屏的尖端显示技术&#xff0c;液晶拼接墙与沉浸式体感交互的梦幻体验交织成一幅幅生动的科技画卷。这里&#xff0c;中控协议的精准对接&#xff0c;如同智慧之网的织就者…

whisper 实现语音识别 ASR - python 实现

语音识别&#xff08;Speech Recognition&#xff09;&#xff0c;同时称为自动语音识别&#xff08;英语&#xff1a;Automatic Speech Recognition, ASR&#xff09;&#xff0c;将语音音频转换为文字的技术。 whisper是一个通用的语音识别模型&#xff0c;由OpenAI公司开发。…

家具城管理平台———未来之窗行业应用跨平台架构

一、家具城商城管理数字化 家具城商城电子化管理优势显著。能实时精确掌控库存&#xff0c;及时补货并降低积压。通过销售数据的精准分析&#xff0c;把握市场需求&#xff0c;优化采购与营销。提升客户服务&#xff0c;记录购买历史以提供个性化体验。简化采购&#xff0c;自动…

leetcode 力扣算法题 快慢指针 双指针 19.删除链表的倒数第n个结点

删除链表的倒数第N个结点 题目要求题目示例解题思路从题目中的已知出发思考寻找目标结点条件转换核心思路 需要注意的点改进建议 完整代码提交结果 题目要求 给你一个链表&#xff0c;删除链表的倒数第n个结点&#xff0c;并且返回链表的头结点。 题目示例 示例 1&#xff1…

微信小程序和抖音小程序的分享和广告接入代码

开发完成小程序或者小游戏之后&#xff0c;我们为什么要接入分享和广告视频功能&#xff0c;主要原因有以下几个方面。 微信小程序和抖音小程序接入分享和广告功能主要基于以下几个原因&#xff1a; 用户获取与增长&#xff1a;分享功能可以帮助用户将小程序内容传播给更多人&…