【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_…...
8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂（如抗体、抑制肽）在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上，高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术，但这类方法普遍面临资源消耗巨大、研发周期冗长…...
工程地质软件市场：发展现状、趋势与策略建议
一、引言 在工程建设领域，准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具，正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...
令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍
文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结： 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析： 实际业务去理解体会统一注…...
LLM基础1_语言模型如何处理文本
基于GitHub项目：https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken：OpenAI开发的专业"分词器" torch：Facebook开发的强力计算引擎，相当于超级计算器 理解词嵌入：给词语画"…...
ios苹果系统，js 滑动屏幕、锚定无效
现象：window.addEventListener监听touch无效，划不动屏幕，但是代码逻辑都有执行到。 scrollIntoView也无效。 原因：这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作，从而会影响…...
vue3+vite项目中使用.env文件环境变量方法
vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量，这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中，新增了一个本地验证码接口 /code，使用函数式路由（RouterFunction）和 Hutool 的 Circle…...
AI，如何重构理解、匹配与决策？
AI 时代，我们如何理解消费？ 作者｜王彬 封面｜Unplash 人们通过信息理解世界。 曾几何时，PC 与移动互联网重塑了人们的购物路径：信息变得唾手可得，商品决策变得高度依赖内容。 但 AI 时代的来…...
短视频矩阵系统文案创作功能开发实践，定制化开发
在短视频行业迅猛发展的当下，企业和个人创作者为了扩大影响力、提升传播效果，纷纷采用短视频矩阵运营策略，同时管理多个平台、多个账号的内容发布。然而，频繁的文案创作需求让运营者疲于应对，如何高效产出高质量文案成…...
A2A JS SDK 完整教程：快速入门指南
目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库ÿ…...