【Canvas与电脑桌面】用六角回旋镖铺满一个平面（1920*1080）
【成图】
【代码】
<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head><title>六角回旋镖桌面1920x1080</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=1920;
const HEIGHT=1080;// 舞台对象
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.fillStyle = "navy";ctx.fillRect(0,0,WIDTH,HEIGHT); const D=60;// 中心距const R=D/Math.sqrt(3);const IMax=Math.ceil(WIDTH/D)+1;const JMax=Math.ceil(HEIGHT/D);// 绘制满屏回旋镖for(var i=0;i<IMax;i++){for(var j=0;j<IMax;j++){var pt=createPt(i*D+(j%2==0?0:1)*D/2,j*D/2*Math.sqrt(3));//drawSolidCircle(ctx,pt.x,pt.y,3,"red");drawDart(ctx,pt.x,pt.y,D);}}// 蒙版ctx.fillStyle="rgba(9,9,9,0.85)";ctx.fillRect(0,0,WIDTH,HEIGHT);writeText(ctx,WIDTH-30,HEIGHT-5,"逆火原创","8px consolas","lightgrey");// 版权}
}/*----------------------------------------------------------
函数:用于绘制单个六角飞镖
ctx:绘图上下文
x:立方体中心横坐标
y:立方体中心纵坐标
distance:每个飞镖的中心距
----------------------------------------------------------*/
function drawDart(ctx,x,y,distance){const D=distance*Math.sqrt(3)/6;var omega=createPt(x,y);var r=D;var angle=-Math.PI/2;var a=createPt(omega.x+r*Math.cos(angle),omega.y+r*Math.sin(angle));r=2*D;angle=-Math.PI/2;var b=createPt(omega.x+r*Math.cos(angle),omega.y+r*Math.sin(angle));r=D;angle=-Math.PI/6;var c=createPt(b.x+r*Math.cos(angle),b.y+r*Math.sin(angle));r=2*D;angle=Math.PI/2;var d=createPt(c.x+r*Math.cos(angle),c.y+r*Math.sin(angle));r=1*D;angle=-Math.PI/6;var e=createPt(d.x+r*Math.cos(angle),d.y+r*Math.sin(angle));r=1*D;angle=Math.PI/6;var f=createPt(e.x+r*Math.cos(angle),e.y+r*Math.sin(angle));r=2*D;angle=Math.PI/6*5;var g=createPt(f.x+r*Math.cos(angle),f.y+r*Math.sin(angle));r=1*D;angle=Math.PI/6*1;var h=createPt(g.x+r*Math.cos(angle),g.y+r*Math.sin(angle));r=1*D;angle=Math.PI/2;var j=createPt(h.x+r*Math.cos(angle),h.y+r*Math.sin(angle));r=2*D;angle=Math.PI/6*7;var k=createPt(j.x+r*Math.cos(angle),j.y+r*Math.sin(angle));r=1*D;angle=Math.PI/2;var l=createPt(k.x+r*Math.cos(angle),k.y+r*Math.sin(angle));r=1*D;angle=Math.PI/6*5;var m=createPt(l.x+r*Math.cos(angle),l.y+r*Math.sin(angle));r=2*D;angle=-Math.PI/2;var n=createPt(m.x+r*Math.cos(angle),m.y+r*Math.sin(angle));r=1*D;angle=Math.PI/6*5;var o=createPt(n.x+r*Math.cos(angle),n.y+r*Math.sin(angle));r=1*D;angle=Math.PI/6*7;var p=createPt(o.x+r*Math.cos(angle),o.y+r*Math.sin(angle));r=2*D;angle=-Math.PI/6;var q=createPt(p.x+r*Math.cos(angle),p.y+r*Math.sin(angle));r=1*D;angle=Math.PI/6*7;var s=createPt(q.x+r*Math.cos(angle),q.y+r*Math.sin(angle));r=1*D;angle=-Math.PI/2;var t=createPt(s.x+r*Math.cos(angle),s.y+r*Math.sin(angle));r=2*D;angle=Math.PI/6;var u=createPt(t.x+r*Math.cos(angle),t.y+r*Math.sin(angle));ctx.lineWidth=2;ctx.strokeStyle="gold";ctx.fillStyle="navy";ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.lineTo(b.x,b.y);ctx.lineTo(c.x,c.y);ctx.lineTo(d.x,d.y);ctx.lineTo(e.x,e.y);ctx.lineTo(f.x,f.y);ctx.lineTo(g.x,g.y);ctx.lineTo(h.x,h.y);ctx.lineTo(j.x,j.y);ctx.lineTo(k.x,k.y);ctx.lineTo(l.x,l.y);ctx.lineTo(m.x,m.y);ctx.lineTo(n.x,n.y);ctx.lineTo(o.x,o.y);ctx.lineTo(p.x,p.y);ctx.lineTo(q.x,q.y);ctx.lineTo(s.x,s.y);ctx.lineTo(t.x,t.y);ctx.lineTo(u.x,u.y);ctx.closePath();ctx.fill();ctx.stroke();
}/*----------------------------------------------------------
函数:用于绘制实心圆,用途是标记点以辅助作图
ctx:绘图上下文
x:矩形中心横坐标
y:矩形中心纵坐标
r:圆半径
color:填充圆的颜色
----------------------------------------------------------*/
function drawSolidCircle(ctx,x,y,r,color){ctx.fillStyle=color;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与电脑桌面】用六角回旋镖铺满一个平面（1920*1080）
【成图】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>六角回旋镖桌面1920x1080</title><style type"text/cs…...
创游系列开心娱乐完整组件
别人分享的一套东西，是个不错的娱乐源码，里面包含了很多小游戏。可以创建房间。 没测试自行研究吧，内含搭建教程。 代码免费下载：百度网盘...
高效驱动之选 ——KP85211ASGA 半桥栅极驱动器 内置互锁死区
KP85211A是一款 225V 耐压，具有 1A 拉电流和 1.5A 灌电流能力的半桥栅极驱动器，专用于驱动功率MOSFET或IGBT。采用高压器件工艺技术，具有良好的电流输出及出色的抗瞬态干扰能力。可保证开关节点 VS 瞬态 -7V 情况下系统正常工作。可支持开关节…...
建投数据获批安全生产许可证
9月1日，建投数据成功获批由北京市住房和城乡建设委员会核发的《安全生产许可证》。该资质的获得，是建投数据能力与实力的展现，更是对其企业规模、管理水平、项目业绩等的肯定。 《安全生产许可证》是国家为了加强安全生产监督管理，…...
MCU9.reg52.h的介绍
1.引用头文件的两种方式 #include <reg52.h> #include "reg52.h" 区别:优先搜索的位置不同! 在keil软件中 #include <reg52.h> 优先搜索软件安装的INC文件夹 #include "reg52.h" 优先搜索当前工程文件夹下的头文件,如果没有,则在软件安装的…...
Python知识点：如何使用Python进行二维码生成与识别
在Python中，生成和识别二维码可以使用不同的库来实现。最常用的库包括 qrcode 和 pyzbar。以下是如何使用这些库来生成和识别二维码的示例： 1. 生成二维码 你可以使用 qrcode 库来生成二维码。首先，你需要安装它： pip install …...
跨域问题(CORS)
文章目录 介绍解决一、添加跨域头，允许跨域1.后端配置CORS策略(4种方法)2.配置nginx 二、代理 介绍 跨域资源共享（CORS, Cross-Origin Resource Sharing）是浏览器的一个安全机制，用来防止来自一个域的网页对另一个域下的资源进行…...
评测AI写毕业论文软件排行榜前十名的网站
在当今信息爆炸的时代，AI智能写作工具已经成为我们写作过程中的得力助手。特别是对于学术论文的撰写，这些工具不仅能够提高写作效率，还能帮助用户生成高质量的文稿。以下是五款值得推荐的AI智能写论文软件，其中特别推荐千笔-AIPas…...
发邮件格式
邮件作为一种正式的沟通方式，其格式通常需要遵循一定的规范。 尊敬的xx：(无缩进) 您好！(缩进两个字符) 正文(缩进两个字符)xxx正文xxx正文xxx正文xxx正文xxx正文xxx正文xxx正文xxx正文xxx正文xxx正文xxx正文xxx正文xxx正文xxx正文xx…...
解锁Web3.0——Scaffold-eth打造以太坊DApp的终极指南
🚀本系列文章为个人学习笔记，目的是巩固知识并记录我的学习过程及理解。文笔和排版可能拙劣，望见谅。 目录 前言 一、快速部署 1、前期准备： 2、安装项目： 二、配置部署运行环境 1、初始化本地链：…...
机器学习之监督学习(四)决策树和随机森林
机器学习之监督学习（四）决策树和随机森林 0. 文章传送1. 决策树 Decision Tree案例引入构建过程 2. 随机森林 Random Forest3. 决策树 vs 神经网络4. 代码实现手写版本sklearn版本 5. 案例Iris数据集介绍实验代码 0. 文章传送 机器学习之监督学习&#…...
Sky Takeaway
软件开发整体介绍 软件开发流程 角色分工 软件环境 苍穹外卖 项目介绍 定位：专门为餐饮企业定制的一款软件产品 技术选型 前端环境搭建 阅读readme文档 nginx.exe放入无中文目录运行并启动 后端环境搭建 项目结构 Nginx反向代理 优点 配置 Nginx反向代理 负…...
JavaScript 模板字符串
模板字符串（Template Literals）是 JavaScript ES6 引入的一项功能，它让字符串的处理变得更加灵活和直观。以下是对模板字符串的详细介绍，包括它的基本特性、用法以及一些高级用法。 一 基本特性 1. 多行字符串 模板字符串允许创…...
模拟new关键字时产生的问题，求解答！
目的：编写函数myNew来模拟new关键字 首先，我们知道new关键字的工作： 1.产生一个新对象 2.将新对象的__proto__属性指向构造函数的prototype属性 3.将新对象赋值给构造函数的this 4.执行构造函数中的代码 函数实现如下： fun…...
SpringBoot2：请求处理原理分析-接口参数解析原理(argumentResolvers)
一、知识回顾 我们知道，接口的参数，一般都要配上注解来一起使用。 不同的参数注解，决定了传参的方式不同。 为什么会这样？ 如果让你设计接口参数解析，你会怎么做？ 首先，我们知道方法参数是形…...
java实现文本相似度计算
需求 **文本推荐：**有多个文本字符串，如何设计一个简单的统计方法（从词频的角度设计），来计算出多个文本字符串两两之间的相似度，并输出大于指定相似度阈值的文本 分析理解 使用Java实现文本相似度计算的…...
基于无人机边沿相关 ------- IBUS、SBUS协议和PPM信号
文章目录 一、IBUS协议二、SBUS协议三、PPM信号 一、IBUS协议 IBUS（Intelligent Bus）是一种用于电子设备之间通信的协议，采用串行通信方式，允许多设备通过单一数据线通信，较低延迟，支持多主机和从机结构&a…...
django学习入门系列之第十点《A 案例： 员工管理系统4》
文章目录 6 部门管理（原始方式）6.6 添加界面的导入（数据库）6.7 删除按键的应用6.8 编辑按键的应用6.81 传值的另一种方式 6.9 提交按键的应用 往期回顾 6 部门管理（原始方式） 6.6 添加界面的导入ÿ…...
【2024】Math-Shepherd：无需人工注释即可逐步验证和强化法学硕士。
搜索词： Math-shepherd: Verify and reinforce llms step-by-step without human annotations P Wang, L Li, Z Shao, R Xu, D Dai, Y Li, D Chen, Y Wu, Z Sui Proceedings of the 62nd Annual Meeting of the Association for …, 2024•aclanthology.org 摘要…...
[苍穹外卖]-08微信支付详解
地址簿管理 分析需求: 查询地址列表/新增地址/修改地址/删除地址/设置默认地址/查询默认地址 接口设计 新增地址接口 查询用户所有的地址接口 查询默认地址接口 根据id修改地址接口 根据id删除地址接口 根据id查询地址接口 设置默认地址接口 数据库设计: 收货地址簿(address_…...
7大应用场景：如何用计算机视觉技术彻底改变足球比赛分析？
7大应用场景：如何用计算机视觉技术彻底改变足球比赛分析？ 【免费下载链接】sports computer vision and sports 项目地址: https://gitcode.com/gh_mirrors/sp/sports 在当今数字化体育时代，足球场精准定位技术正以前所未有的方式改变…...
YOLOv11分割模型实战：用C++和ONNXRuntime解析‘output0’和‘output1’双输出，实现像素级颜色分析
YOLOv11分割模型实战：C与ONNXRuntime双输出解析与像素级颜色分析 在计算机视觉领域，目标检测与实例分割技术的结合正成为工业应用的新标准。YOLOv11作为YOLO系列的最新成员，不仅延续了其高效检测的特性，更通过双输出结构实现了精准…...
QwQ-32B在ollama中的推理效果展示：数学定理推导、算法设计全过程
QwQ-32B在ollama中的推理效果展示：数学定理推导、算法设计全过程 1. 模型简介与部署准备 QwQ-32B是Qwen系列中专注于推理能力的语言模型，与传统指令调优模型相比，它在解决复杂问题和推理任务方面表现突出。这款中等规模模型拥有325亿参数&a…...
【C++】三大图像加载库实战对比：libpng、FreeImage与stb_image的选型指南
1. 为什么需要图像加载库？ 在C项目中处理图像文件时，直接操作二进制数据就像用螺丝刀吃牛排——理论上可行，但实际体验极其糟糕。图像加载库就是帮我们解决这个问题的餐具套装。以最常见的PNG文件为例，它可能包含调色板、压缩数据…...
Llama-3.2V-11B-cot惊艳案例：电影截图角色关系推演与剧情发展预测展示
Llama-3.2V-11B-cot惊艳案例：电影截图角色关系推演与剧情发展预测展示 1. 视觉推理工具简介 Llama-3.2V-11B-cot是基于Meta多模态大模型开发的高性能视觉推理工具，专为双卡4090环境深度优化。该工具不仅修复了视觉权重加载的关键问题，还支持…...
流程可视化引擎定制指南：从技术实现到业务价值转化
流程可视化引擎定制指南：从技术实现到业务价值转化 【免费下载链接】Drawflow Simple flow library 🖥️🖱️ 项目地址: https://gitcode.com/gh_mirrors/dr/Drawflow 在数字化转型过程中，企业面临着业务流程可视化与实际业…...
Xenium空间原位转录组：从数据到生物学发现的实战解析
1. Xenium平台与空间原位转录组技术初探 第一次接触Xenium平台的数据时，我被它呈现的空间基因表达图谱震撼到了。想象一下，这就像给组织切片拍了一张"基因表达照片"，每个像素点都记录着成百上千个基因的活动状态。10x Genomics推出…...
ENVI 5.3波谱库实战：从自带库浏览到自定义库创建，遥感地物识别效率翻倍
ENVI 5.3波谱库实战：从自带库浏览到自定义库创建，遥感地物识别效率翻倍 在遥感图像解译工作中，地物波谱特征就像每类物质的"光学指纹"。ENVI 5.3的波谱库功能，正是帮助我们从海量遥感数据中快速匹配这些"指纹"…...
实战LangGraph构建智能客服系统：在快马平台实现工单自动分类与处理全流程
今天想和大家分享一个用LangGraph构建智能客服系统的实战经验。这个项目主要解决工单自动分类和处理的问题，整个过程在InsCode(快马)平台上完成，从开发到部署一气呵成。 项目背景与需求分析 传统客服系统需要人工处理大量工单，效率低下且容易…...
PX4飞控系统深度探索：如何用开源技术打造智能无人机控制大脑
PX4飞控系统深度探索：如何用开源技术打造智能无人机控制大脑 【免费下载链接】PX4-Autopilot PX4 Autopilot Software 项目地址: https://gitcode.com/gh_mirrors/px/PX4-Autopilot 想象一下，你正站在一片开阔的试验场上，手里握着一架…...