【Canvas与光阑】立方体六彩光阑

【成图】

120*120的png图标

大小图：

【代码】

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head><title>立方体 六彩光阑 Draft2</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=120;//基准尺寸var colors=[["rgb(17,110,65)","rgb(78,243,160)"],["rgb(142,88,42)","rgb(232,139,36)"],["rgb(147,41,43)","rgb(204,37,44)"],                ["rgb(166,131,27)","rgb(240,213,32)"],["rgb(34,94,167)","rgb(23,114,195)"],["rgb(137,15,64)","rgb(229,1,112)"],]// 外水滴形ctx.save();var r=R;const N=6;for(var i=0;i<N;i++){var theta=Math.PI*2/N*i+Math.PI/6;var a=createPt(r*Math.cos(theta),r*Math.sin(theta));var l=r;var angle=theta-Math.PI/3;var b=createPt(a.x+l*Math.cos(angle),a.y+l*Math.sin(angle));var ratio=5;var bLeft=createPt(a.x/ratio+b.x*(ratio-1)/ratio,a.y/ratio+b.y*(ratio-1)/ratio);l=2*r;angle=theta-Math.PI/3;var c=createPt(l*Math.cos(angle),l*Math.sin(angle));l=r;angle=theta-Math.PI/3;var f=createPt(l*Math.cos(angle),l*Math.sin(angle));l=r;angle=theta-Math.PI/3*2;var e=createPt(f.x+l*Math.cos(angle),f.y+l*Math.sin(angle));var eDown=createPt(f.x/ratio+e.x*(ratio-1)/ratio,f.y/ratio+e.y*(ratio-1)/ratio);l=r;angle=theta-Math.PI/3/ratio;var bRight=createPt(f.x+l*Math.cos(angle),f.y+l*Math.sin(angle));l=r;angle=theta-Math.PI/3*2;var g=createPt(l*Math.cos(angle),l*Math.sin(angle));l=r;angle=theta-Math.PI/3-Math.PI/3/ratio;var eUp=createPt(g.x+l*Math.cos(angle),g.y+l*Math.sin(angle));l=r;angle=theta-Math.PI/3*2;var d=createPt(g.x+l*Math.cos(angle),g.y+l*Math.sin(angle));var gnt=ctx.createLinearGradient(a.x,a.y,d.x,d.y);gnt.addColorStop(0,colors[i][0]);gnt.addColorStop(1,colors[i][1]);ctx.lineWidth=1;ctx.fillStyle=gnt;ctx.beginPath();ctx.lineTo(a.x,a.y);ctx.lineTo(bLeft.x,bLeft.y);ctx.quadraticCurveTo(b.x,b.y,bRight.x,bRight.y);ctx.arc(f.x,f.y,r,theta-Math.PI/3/ratio,theta-Math.PI/3,true);ctx.arc(0,0,2*r,theta-Math.PI/3,theta-Math.PI/3*2,true);ctx.arc(g.x,g.y,r,theta-Math.PI/3*2,theta-Math.PI/3-Math.PI/3/ratio,false);ctx.lineTo(eUp.x,eUp.y);ctx.quadraticCurveTo(e.x,e.y,eDown.x,eDown.y);ctx.closePath();ctx.fill();}ctx.restore();    // 内正方形ctx.save();var r=R;var angle=Math.PI/3*0+Math.PI/6;var a=createPt(r*Math.cos(angle),r*Math.sin(angle));angle=Math.PI/3*1+Math.PI/6;var b=createPt(r*Math.cos(angle),r*Math.sin(angle));angle=Math.PI/3*2+Math.PI/6;var c=createPt(r*Math.cos(angle),r*Math.sin(angle));        angle=Math.PI/3*3+Math.PI/6;var d=createPt(r*Math.cos(angle),r*Math.sin(angle));angle=Math.PI/3*4+Math.PI/6;var e=createPt(r*Math.cos(angle),r*Math.sin(angle));angle=Math.PI/3*5+Math.PI/6;var f=createPt(r*Math.cos(angle),r*Math.sin(angle));ctx.fillStyle="rgb(222,222,222)";ctx.beginPath();ctx.moveTo(0,0);ctx.lineTo(f.x,f.y);ctx.lineTo(a.x,a.y);ctx.lineTo(b.x,b.y);ctx.closePath();ctx.fill();ctx.fillStyle="rgb(202,202,202)";ctx.beginPath();ctx.moveTo(0,0);ctx.lineTo(b.x,b.y);ctx.lineTo(c.x,c.y);ctx.lineTo(d.x,d.y);ctx.closePath();ctx.fill();ctx.fillStyle="rgb(238,238,238)";ctx.beginPath();ctx.moveTo(0,0);ctx.lineTo(d.x,d.y);ctx.lineTo(e.x,e.y);ctx.lineTo(f.x,f.y);ctx.closePath();ctx.fill();ctx.restore();    writeText(ctx,WIDTH/2-30,HEIGHT/2-5,"逆火制图","8px consolas","lightgrey");// 版权}
}/*----------------------------------------------------------
函数:用于绘制矩形
ctx:绘图上下文
x:矩形中心横坐标
y:矩形中心纵坐标
width:矩形宽
height:矩形高
----------------------------------------------------------*/
function drawRect(ctx,x,y,width,height){ctx.beginPath();ctx.moveTo(x-width/2,y-height/2);ctx.lineTo(x+width/2,y-height/2);ctx.lineTo(x+width/2,y+height/2);ctx.lineTo(x-width/2,y+height/2);ctx.closePath();
}/*----------------------------------------------------------
函数:用于绘制实心圆
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.rhkb.cn/news/488040.html

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

相关文章

[代码随想录14]二叉树的常用操作，翻转，对称，最大深度和最小深度，递归版本

[代码随想录14]二叉树的常用操作，翻转，对称，最大深度和最小深度，递归版本

前言 在二叉树的题目中&#xff0c;递归的解法无疑是是最简单和最好理解的&#xff0c;也能快速解题&#xff0c;本篇介绍一下递归的常见的二叉树题目。 题目链接 226. 翻转二叉树 - 力扣&#xff08;LeetCode&#xff09; 101. 对称二叉树 - 力扣&#xff08;LeetCode&#…
阅读更多...
css基础记录

css基础记录

基础 选择器 复合选择器 后代选择器 div p {}; 类似如上,找到div中所有的后代,注意是所有的后代 子代选择器 > div > a 只选择div的儿子中有a的 并集选择器 用逗号,分隔 p,div,span,h1 { … } 一般一行写一个 CSS元素显示模式 分为块元素,行内元素 块元素 特点…
阅读更多...
HDR视频技术之六：色调映射

HDR视频技术之六：色调映射

图像显示技术的最终目的就是使得显示的图像效果尽量接近人们在自然界中观察到的对应的场景。 HDR 图像与视频有着更高的亮度、更深的位深、更广的色域&#xff0c;因此它无法在常见的普通显示器上显示。 入门级的显示器与播放设备&#xff08;例如普通人家使用的电视&#xff0…
阅读更多...
《HTML 的变革之路：从过去到未来》

《HTML 的变革之路：从过去到未来》

一、HTML 的发展历程 图片: HTML 从诞生至今&#xff0c;经历了多个版本的迭代。 &#xff08;一&#xff09;早期版本 HTML 3.2 在 1997 年 1 月 14 日成为 W3C 推荐标准&#xff0c;提供了表格、文字绕排和复杂数学元素显示等新特性&#xff0c;但因实现复杂且缺乏浏览器…
阅读更多...
webrtc学习----前端推流拉流，局域网socket版，一对一

webrtc学习----前端推流拉流，局域网socket版，一对一

提示&#xff1a;局域网socket版 文章目录 [TOC](文章目录) 前言一、教程二、webrtc工作流程三、推流端四、拉流五、socket服务六、效果七、备注总结 前言 ‌‌‌‌‌WebRTC&#xff08;Web Real-Time Communication&#xff09;‌是一种实时通讯技术&#xff0c;允许网络应用或…
阅读更多...
IMX6ULL开发板挂载 Ubuntu 的 NFS 目录，并以交叉编译得到的hello程序进行测试

IMX6ULL开发板挂载 Ubuntu 的 NFS 目录，并以交叉编译得到的hello程序进行测试

首先参考博文 https://blog.csdn.net/wenhao_ir/article/details/144404637 使得IMX6ULL开发板、PC机上的USB网卡、VMware中的Ubuntu能互相Ping 通 然后开始将Ubuntu 的 NFS 目录挂载到Ubuntu中。 为什么挂载&#xff1f; 答&#xff1a;其实是把 Ubuntu中的某个目录通过NFS网…
阅读更多...
Vscode 构建 uniapp vue3 + ts 微信小程序项目

Vscode 构建 uniapp vue3 + ts 微信小程序项目

前言 为什么要使用 Vscode 来开发构建 uniapp 项目&#xff1f;从个人角度来讲&#xff0c;仅是想要 Vscode 丰富的插件生态&#xff0c;以及最重要的优秀的 TtypeScript 类型检查支持&#xff0c;因为本人是 TS 重度使用者。 如果你更习惯使用 js 进行开发&#xff0c;使用 …
阅读更多...
【Spark】Spark的两种核心Shuffle工作原理详解

【Spark】Spark的两种核心Shuffle工作原理详解

Spark 的shuffle机制 一、Spark ShuffleManager 发展历程 Spark 1.1.0 之前 在 Spark 1.1.0 之前&#xff0c;Spark 使用 BlockStoreShuffleFetcher 来处理 Shuffle 操作。这个实现主要依赖于直接从 BlockManager 获取 Shuffle 数据&#xff0c;并通过网络进行交换。 Spark …
阅读更多...
网上商城系统设计与实现

网上商城系统设计与实现

文末获取源码和万字论文&#xff0c;制作不易&#xff0c;感谢点赞支持。 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本网上商城系统就是在这样的大环境…
阅读更多...
UE5制作血条和血包【扣血/回血机制】

UE5制作血条和血包【扣血/回血机制】

首先到第三人称蓝图&#xff0c;创建一个变量health&#xff0c;代表血量&#xff0c;默认值改为100 接着创建一个控件蓝图 设置血条颜色和绑定百分比 绑定血条&#xff0c;因为是百分比所以除以100 然后到第三人称蓝图Begin Play后创建控件蓝图&#xff0c;添加到视口 …
阅读更多...
LabVIEW实验站反馈控制系统

LabVIEW实验站反馈控制系统

开发了一套基于LabVIEW的软X射线磁性圆二色实验站的反馈控制系统。这套系统主要用于实现对实验站高电压的精确控制&#xff0c;从而保持照射在样品上的流强稳定性&#xff0c;为分析样品吸收谱提供可靠基准&#xff0c;同时提供了易用的用户界面和强大的数据存储功能。 项目背景…
阅读更多...
【区块链】区块链密码学基础

【区块链】区块链密码学基础

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 区块链密码学基础引言一、哈希函数1.1 基本概念1.2 数学表达 二、非对称加密2.1…
阅读更多...
题海拾贝：力扣 20、有效的括号

题海拾贝：力扣 20、有效的括号

Hello大家好&#xff01;很高兴我们又见面啦&#xff01;给生活添点passion,开始今天的编程之路&#xff01; 我的博客&#xff1a;<但凡.-CSDN博客 我的专栏&#xff1a;《编程之路》、《题海拾贝》、《数据结构与算法之美》 欢迎点赞、关注&#xff01; 1、题目 2、题解 这…
阅读更多...
在 Ansys Mechanical 中使用“螺栓工具”插件自动生成螺栓

在 Ansys Mechanical 中使用“螺栓工具”插件自动生成螺栓

总结 在有限元分析 &#xff08;FEA&#xff09; 中&#xff0c;高效创建螺栓连接对于确保机械装配的结构完整性和性能至关重要。螺栓是连接组件不可或缺的一部分&#xff0c;它们在负载下的精确建模会影响整个系统。快速高效的螺栓建模使工程师能够快速优化设计&#xff0c;满…
阅读更多...
汽车零部件设计之——发动机曲轴预应力模态分析仿真APP

汽车零部件设计之——发动机曲轴预应力模态分析仿真APP

汽车零部件是汽车工业的基石&#xff0c;是构成车辆的基础元素。一辆汽车通常由上万件零部件组成&#xff0c;包括发动机系统、传动系统、制动系统、电子控制系统等&#xff0c;它们共同确保了汽车的安全、可靠性及高效运行。在汽车产业快速发展的今天&#xff0c;汽车零部件需…
阅读更多...
螺丝螺帽缺陷检测识别数据集，支持yolo，coco，voc三种格式的标记，一共3081张图片

螺丝螺帽缺陷检测识别数据集，支持yolo，coco，voc三种格式的标记，一共3081张图片

螺丝螺帽缺陷检测识别数据集&#xff0c;支持yolo&#xff0c;coco&#xff0c;voc三种格式的标记&#xff0c;一共3081张图片 3081总图像数 数据集分割 训练组90&#xff05; 2781图片 有效集7% 220图片 测试集3% 80图片 预处理…
阅读更多...
css矩形样式，两边圆形

css矩形样式，两边圆形

废话不多说&#xff0c;代码如下&#xff0c;直接拷贝即可使用&#xff1a; index.vue文件 <template><view class"wrap"><view class"tabs"><view class"tab active"><view class"name">标签</view…
阅读更多...
在C#中编程绘制和移动线段

在C#中编程绘制和移动线段

这个示例允许用户绘制和移动线段。它允许您根据鼠标下方的内容执行三种不同的操作。 当鼠标位于某个线段上时&#xff0c;光标会变成手的形状。然后您可以单击并拖动来移动该线段。当鼠标位于线段的终点上时&#xff0c;光标会变成箭头。然后您可以单击并拖动以移动终点。当鼠…
阅读更多...
MBox20网关助力汽车零部件企业实现与效率飞跃

MBox20网关助力汽车零部件企业实现与效率飞跃

背景概述 该企业为一家深耕汽车零部件制造的传统企业&#xff0c;拥有高效运作的自动化生产线体系&#xff0c;专注于汽车发动机零部件的生产制造。然而&#xff0c;面对市场需求的瞬息万变及消费者个性化需求的日益凸显&#xff0c;该企业正遭遇生产效率瓶颈、质量控制挑战、…
阅读更多...
【Golang】Go语言编程思想（六）：Channel，第六节，并发编程模式

【Golang】Go语言编程思想（六）：Channel，第六节，并发编程模式

并发模式 下例重新对 channel 的用法进行回顾&#xff1a; package mainimport ("fmt""math/rand""time" )func msgGen(name string) chan string {c : make(chan string)go func(name string) { // 在这个 goroutine 当中向外发送数据i : 0fo…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023