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

news2024/11/13 9:30:53

【成图】

【代码】

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

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

动手学深度学习（pytorch）学习记录27-深度卷积神经网络(AlexNet)[学习记录]

动手学深度学习（pytorch）学习记录27-深度卷积神经网络(AlexNet)[学习记录]

目录 创建模型读取数据集训练AlexNet AlexNet 是由 Alex Krizhevsky、Ilya Sutskever 和 Geoffrey Hinton 在 2012 年提出的深度卷积神经网络&#xff0c;它在当年的 ImageNet 大规模视觉识别挑战赛&#xff08;ILSVRC&#xff09;中取得了显著的成绩&#xff0c;从而引起了深度…
阅读更多...
动手学深度学习（pytorch土堆）-02TensorBoard的使用

动手学深度学习（pytorch土堆）-02TensorBoard的使用

1.可视化 代码使用了 torch.utils.tensorboard 将数据记录到 TensorBoard 以便可视化。具体来说&#xff0c;它将标量数据记录到目录 logs 中&#xff0c;使用的是 SummaryWriter 类。 代码分解如下&#xff1a; SummaryWriter("logs")&#xff1a;初始化一个 Ten…
阅读更多...
常用的 git命令的使用

常用的 git命令的使用

一. 简介 本文简单学习一下&#xff0c;在从远程仓库中拉取代码&#xff0c;或者向远程仓库提交代码时&#xff0c;经常用到的一些 git命令。 二. git的其他命令的使用 1. 重新提交代码的命令 当已经提交过一笔代码&#xff0c;并经过了 CI自动化编译通过。这时可能发现…
阅读更多...
WebAPI(二)、DOM事件监听、事件对象event、事件流、事件委托、页面加载与滚动事件、client，offset

WebAPI(二)、DOM事件监听、事件对象event、事件流、事件委托、页面加载与滚动事件、client，offset

文章目录 一、 DOM事件1. 事件监听2. 事件类型(1)、鼠标事件(2)、焦点事件(3)、键盘事件(4)、文本事件 3. 事件对象(1)、获取事件对象(2)、事件对象常用属性 4. 环境对象 this5. 回调函数 二、 DOM事件进阶1. 事件流(1)、 捕获阶段(2)、 冒泡阶段(3)、 阻止冒泡(4) 、阻止元素默…
阅读更多...
python绘制3D瀑布图

python绘制3D瀑布图

成品&#xff1a; 代码&#xff1a; def line_3d(x, y, z, x_label_indexs):"""在y轴的每个点&#xff0c;向x轴的方向延伸出一个折线面&#xff1a;展示每个变量的时序变化。x: x轴&#xff0c;时间维&#xff0c;右边。y: y轴&#xff0c;变量维&#xff0c;…
阅读更多...
前端：JavaScript 实现类

前端：JavaScript 实现类

文章目录 1. Es6-类-class2. Es6-class 实现继承3. Es6-class 静态属性和私有属性4. Es5-寄生组合式继承 1. Es6-类-class 类是创建对象的模板&#xff0c;用代码封装数据以处理该数据&#xff0c;js中的类建立在原型上。 如何定义类&#xff0c;首先需要关键字 class&#x…
阅读更多...
C++之打造my vector篇

C++之打造my vector篇

目录 前言 1.参照官版&#xff0c;打造vector的基本框架 2.丰富框架&#xff0c;实现接口方法 基本的迭代器实现 数据的[]访问 容量和数据空间的改变 vector空间大小的返回与判空 数据的增删 数据打印 拷贝构造和赋值重载 3.扩展延伸&#xff0c;深度理解代码 迭代器…
阅读更多...
iText2KG：显著降低LLM构建知识图谱时的幻觉现象

iText2KG：显著降低LLM构建知识图谱时的幻觉现象

1. 当前知识图谱构建存在的问题 知识图谱通过捕捉实体之间的关系来构建知识的结构化表示&#xff0c;在分析文本数据集和从结构化异构数据中推断知识方面具有显著优势。比如&#xff0c;知识图谱能够融合来自多个来源的不同数据&#xff0c;提供一个具有凝聚力的信息视角。还能…
阅读更多...
【Python进阶】学习Python从入门到进阶，详细步骤，就看这一篇。文末附带项目演练！！！

【Python进阶】学习Python从入门到进阶，详细步骤，就看这一篇。文末附带项目演练！！！

详细的Python学习路线 1. Python基础 Python安装和环境配置&#xff1a;学习如何在你的操作系统上安装Python&#xff0c;并配置开发环境。变量和数据类型&#xff1a;学习如何定义变量&#xff0c;以及Python中的基本数据类型&#xff0c;如整数、浮点数、字符串等。 Pytho…
阅读更多...
【人工智能学习笔记】4_3 深度学习基础之循环神经网络

【人工智能学习笔记】4_3 深度学习基础之循环神经网络

循环神经网络（Recurrent Neural Network, RNN） 是一类以序列（sequence）数据为输入，在序列的演进方向进行递归（recursion）且所有节点（循环单元）按链式连接的递归神经网络（recursive neural network），循环神经网络具有短期记忆能力 RNN核心思想 RNN的结构 一个典型…
阅读更多...
基于CNN-BiLSTM-Attention的流量预测 完整数据代码可直接运行

基于CNN-BiLSTM-Attention的流量预测 完整数据代码可直接运行

直接看视频： 基于CNN-BiLSTM-Attention的流量预测 完整数据代码可直接运行_哔哩哔哩_bilibili 模型： 有效提取径流时间序列的信息特征,提高径流预测模型的高维非线性拟合能力和预测性能的稳定性,将卷积神经网络(CNN),双向长短期记忆网络(BiLSTM)和注意力机制(attention)相…
阅读更多...
tomcat端口被占用解决方法

tomcat端口被占用解决方法

在安装目录的conf下修改server.xml文件&#xff0c;修改后保存重启即可
阅读更多...
十四、MySQL高级— 分库分表（7）

十四、MySQL高级— 分库分表（7）

&#x1f33b;&#x1f33b; 目录 一、分库1.1 修改配置 schema.xml1.2 如何选择分库表1.3 SQLyog 连接 mycat 二、水平分表2.1 schema.xml2.2 rule.xml2.3 跨库join2.3.1 ER表2.3.2 全局表 2.4 全局序列2.4.1 本地文件2.4.2 数据库方式(一般都用这个)2.4.3 时间戳方式2.4.4 自…
阅读更多...
时间序列预测学习方向总概括

时间序列预测学习方向总概括

推荐资源&#xff1a; 1.MA、AR、ARIMA 算法小陈-CSDN博客 2.informer论文讲解 【2024最火的两个模型&#xff1a;InformerLSTM两大时间序列预测模型&#xff0c;论文精读代码复现&#xff0c;究极通俗易懂&#xff01;——人工智能|AI|机器学习|深度学习-哔哩哔哩】 https…
阅读更多...
微波无源器件 4 基于高阶定向耦合器的双极化波束形成网络

微波无源器件 4 基于高阶定向耦合器的双极化波束形成网络

摘要&#xff1a; 一种Ka频段的双极化3dB定向耦合器被设计用于波束形成网络应用。所提出的解决方案对于紧凑Nolen网络。Nolen结构优于器平面和无损特别具有吸引力。两个平行方波导通过口径阵列耦合&#xff0c;设计用于获得两个正交极化之间的所需耦合和高隔离度。 索引词&…
阅读更多...
sql语句的训练2024/9/9

sql语句的训练2024/9/9

1题 需要看清思路&#xff1a;不是将数据库中的device_id的名字改为user_infors_example&#xff0c;而是在查找的时候&#xff0c;需要将device_id看成user_infors_example来进行查找。 答案 select device_id AS user_infos_example FROM user_profile limit 2 2 当固定查找…
阅读更多...
idea报错：java：错误：不支持发行版本5

idea报错：java：错误：不支持发行版本5

问题 使用idea创建Maven项目运行是报错&#xff1a;java&#xff1a;错误&#xff1a;不支持发行版本5 解决 1.打开Settings 2.在Java compiler 里面修改和Java版本一致 然后就可以正常运行
阅读更多...
租房市场新动力：SpringBoot大学生租房系统

租房市场新动力：SpringBoot大学生租房系统

第1章 绪论 1.1 课题背景 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供服务。所以各行业&#xff0c;尤其是规模较大的企业和学校等…
阅读更多...
erlang学习: Mnesia Erlang数据库2

erlang学习: Mnesia Erlang数据库2

Mnesia数据库增加与查询学习 -module(test_mnesia).-record(shop, {item, quantity, cost}). -record(cost, {name, price}). -record(design, {info, plan}). %% API -export([insert/3,select/1,start/0]). start() ->mnesia:start().insert(Name, Quantity, Cost) ->…
阅读更多...
U1 U2 U3 U4量子门

U1 U2 U3 U4量子门

阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023