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

【Canvas与电脑桌面】用六角回旋镖铺满一个平面（1920*1080）

news 2025/7/12 16:50:14

【成图】

【代码】

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

编程日记 2024/9/11 11:07:08

创游系列开心娱乐完整组件

别人分享的一套东西&#xff0c;是个不错的娱乐源码&#xff0c;里面包含了很多小游戏。可以创建房间。 没测试自行研究吧&#xff0c;内含搭建教程。 代码免费下载&#xff1a;百度网盘...

编程日记 2024/9/11 11:05:05

高效驱动之选 ——KP85211ASGA 半桥栅极驱动器 内置互锁死区

KP85211A是一款 225V 耐压&#xff0c;具有 1A 拉电流和 1.5A 灌电流能力的半桥栅极驱动器&#xff0c;专用于驱动功率MOSFET或IGBT。采用高压器件工艺技术&#xff0c;具有良好的电流输出及出色的抗瞬态干扰能力。可保证开关节点 VS 瞬态 -7V 情况下系统正常工作。可支持开关节…...

编程日记 2024/9/11 11:04:04

建投数据获批安全生产许可证

9月1日&#xff0c;建投数据成功获批由北京市住房和城乡建设委员会核发的《安全生产许可证》。该资质的获得&#xff0c;是建投数据能力与实力的展现&#xff0c;更是对其企业规模、管理水平、项目业绩等的肯定。 《安全生产许可证》是国家为了加强安全生产监督管理&#xff0c…...

编程日记 2024/9/11 11:03:03

MCU9.reg52.h的介绍

1.引用头文件的两种方式 #include <reg52.h> #include "reg52.h" 区别:优先搜索的位置不同! 在keil软件中 #include <reg52.h> 优先搜索软件安装的INC文件夹 #include "reg52.h" 优先搜索当前工程文件夹下的头文件,如果没有,则在软件安装的…...

编程日记 2024/9/11 10:54:55

Python知识点：如何使用Python进行二维码生成与识别

在Python中&#xff0c;生成和识别二维码可以使用不同的库来实现。最常用的库包括 qrcode 和 pyzbar。以下是如何使用这些库来生成和识别二维码的示例&#xff1a; 1. 生成二维码 你可以使用 qrcode 库来生成二维码。首先&#xff0c;你需要安装它&#xff1a; pip install …...

编程日记 2024/9/11 10:53:55

跨域问题(CORS)

文章目录 介绍解决一、添加跨域头&#xff0c;允许跨域1.后端配置CORS策略(4种方法)2.配置nginx 二、代理 介绍 跨域资源共享&#xff08;CORS, Cross-Origin Resource Sharing&#xff09;是浏览器的一个安全机制&#xff0c;用来防止来自一个域的网页对另一个域下的资源进行…...

编程日记 2024/9/11 10:50:51

评测AI写毕业论文软件排行榜前十名的网站

在当今信息爆炸的时代&#xff0c;AI智能写作工具已经成为我们写作过程中的得力助手。特别是对于学术论文的撰写&#xff0c;这些工具不仅能够提高写作效率&#xff0c;还能帮助用户生成高质量的文稿。以下是五款值得推荐的AI智能写论文软件&#xff0c;其中特别推荐千笔-AIPas…...

编程日记 2024/9/11 10:48:49

发邮件格式

邮件作为一种正式的沟通方式&#xff0c;其格式通常需要遵循一定的规范。 尊敬的xx&#xff1a;(无缩进)   您好&#xff01;(缩进两个字符)   正文(缩进两个字符)xxx正文xxx正文xxx正文xxx正文xxx正文xxx正文xxx正文xxx正文xxx正文xxx正文xxx正文xxx正文xxx正文xxx正文xx…...

编程日记 2024/9/11 10:47:48

解锁Web3.0——Scaffold-eth打造以太坊DApp的终极指南

&#x1f680;本系列文章为个人学习笔记&#xff0c;目的是巩固知识并记录我的学习过程及理解。文笔和排版可能拙劣&#xff0c;望见谅。 目录 前言 一、快速部署 1、前期准备&#xff1a; 2、安装项目&#xff1a; ​ 二、配置部署运行环境 1、初始化本地链&#xff1a;…...

编程日记 2024/9/11 10:45:45

机器学习之监督学习(四)决策树和随机森林

机器学习之监督学习&#xff08;四&#xff09;决策树和随机森林 0. 文章传送1. 决策树 Decision Tree案例引入构建过程 2. 随机森林 Random Forest3. 决策树 vs 神经网络4. 代码实现手写版本sklearn版本 5. 案例Iris数据集介绍实验代码 0. 文章传送 机器学习之监督学习&#…...

编程日记 2024/9/11 10:44:44

Sky Takeaway

软件开发整体介绍 软件开发流程 角色分工 软件环境 苍穹外卖 项目介绍 定位&#xff1a;专门为餐饮企业定制的一款软件产品 技术选型 前端环境搭建 阅读readme文档 nginx.exe放入无中文目录运行并启动 后端环境搭建 项目结构 Nginx反向代理 优点 配置 Nginx反向代理 负…...

编程日记 2024/9/11 10:43:43

JavaScript 模板字符串

模板字符串&#xff08;Template Literals&#xff09;是 JavaScript ES6 引入的一项功能&#xff0c;它让字符串的处理变得更加灵活和直观。以下是对模板字符串的详细介绍&#xff0c;包括它的基本特性、用法以及一些高级用法。 一 基本特性 1. 多行字符串 模板字符串允许创…...

编程日记 2024/9/11 10:41:41

模拟new关键字时产生的问题，求解答！

目的&#xff1a;编写函数myNew来模拟new关键字 首先&#xff0c;我们知道new关键字的工作&#xff1a; 1.产生一个新对象 2.将新对象的__proto__属性指向构造函数的prototype属性 3.将新对象赋值给构造函数的this 4.执行构造函数中的代码 函数实现如下&#xff1a; fun…...

编程日记 2024/9/11 10:40:40

SpringBoot2：请求处理原理分析-接口参数解析原理(argumentResolvers)

一、知识回顾 我们知道&#xff0c;接口的参数&#xff0c;一般都要配上注解来一起使用。 不同的参数注解&#xff0c;决定了传参的方式不同。 为什么会这样&#xff1f; 如果让你设计接口参数解析&#xff0c;你会怎么做&#xff1f; 首先&#xff0c;我们知道方法参数是形…...

编程日记 2024/9/11 10:39:39

java实现文本相似度计算

需求 **文本推荐&#xff1a;**有多个文本字符串&#xff0c;如何设计一个简单的统计方法&#xff08;从词频的角度设计&#xff09;&#xff0c;来计算出多个文本字符串两两之间的相似度&#xff0c;并输出大于指定相似度阈值的文本 分析理解 使用Java实现文本相似度计算的…...

编程日记 2024/9/11 10:37:37

基于无人机边沿相关 ------- IBUS、SBUS协议和PPM信号

文章目录 一、IBUS协议二、SBUS协议三、PPM信号 一、IBUS协议 IBUS&#xff08;Intelligent Bus&#xff09;是一种用于电子设备之间通信的协议&#xff0c;采用串行通信方式&#xff0c;允许多设备通过单一数据线通信&#xff0c;较低延迟&#xff0c;支持多主机和从机结构&a…...

编程日记 2024/9/11 10:36:36

django学习入门系列之第十点《A 案例： 员工管理系统4》

文章目录 6 部门管理&#xff08;原始方式&#xff09;6.6 添加界面的导入&#xff08;数据库&#xff09;6.7 删除按键的应用6.8 编辑按键的应用6.81 传值的另一种方式 6.9 提交按键的应用 往期回顾 6 部门管理&#xff08;原始方式&#xff09; 6.6 添加界面的导入&#xff…...

编程日记 2024/9/11 10:34:35

【2024】Math-Shepherd：无需人工注释即可逐步验证和强化法学硕士。

搜索词&#xff1a; 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 摘要…...

编程日记 2024/9/11 10:33:34

[苍穹外卖]-08微信支付详解

地址簿管理 分析需求: 查询地址列表/新增地址/修改地址/删除地址/设置默认地址/查询默认地址 接口设计 新增地址接口 查询用户所有的地址接口 查询默认地址接口 根据id修改地址接口 根据id删除地址接口 根据id查询地址接口 设置默认地址接口 数据库设计: 收货地址簿(address_…...

编程日记 2024/9/11 10:31:32

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

编程新知 2025/7/11 8:49:18

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

编程新知 2025/7/8 16:00:54

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

编程新知 2025/7/11 11:15:18

技术栈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/9 13:20:20

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...

编程新知 2025/6/21 16:18:00

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...

编程新知 2025/7/12 9:12:03

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

编程新知 2025/7/9 4:17:05

OD 算法题 B卷【正整数到Excel编号之间的转换】

文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的&#xff1a;a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...

编程新知 2025/7/9 8:36:10

springboot 日志类切面，接口成功记录日志，失败不记录

springboot 日志类切面&#xff0c;接口成功记录日志&#xff0c;失败不记录 自定义一个注解方法 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;/***…...

编程新知 2025/7/8 20:29:22

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言 在人工智能技术飞速发展的今天&#xff0c;深度学习与大模型技术已成为推动行业变革的核心驱动力&#xff0c;而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心&#xff0c;系统性地呈现了两部深度技术著作的精华&#xff1a;…...

编程新知 2025/7/10 2:38:43