【Canvas与艺术】菊花孔雀螺旋

news2024/9/22 3:39:55

【成图】

【代码】

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>菊花孔雀螺旋</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.fillStyle = "rgb(45,24,67)";
        ctx.fillRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);

        const ANGLE=Math.asin(1/4);

        const COLORS=[  
                        "rgb(254,250,251)","rgb(77,46,126)",
                        "rgb(144,46,147)","rgb(232,48,56)",
                        "rgb(242,130,129)","rgb(251,205,290)",
                        ];

        for(var j=20;j>0;j--){
            var r=j/1.5;// 小圆半径

            var g=r/4;// 小圆与尖角的距离
            var d=r*12;// 尖角到大圆圆心的距离
            var R=r*3;// 大圆半径
            var N=12;// 菊花瓣数
            
            for(var i=0;i<N;i++){
                var theta=Math.PI*2/N*i;

                var radius=r+g;
                var a=createPt(radius*Math.cos(theta),radius*Math.sin(theta));

                radius=r+g+d;
                var omega=createPt(radius*Math.cos(theta),radius*Math.sin(theta));

                radius=R;
                var angle=theta-Math.PI/2-ANGLE;
                var b=createPt(omega.x+R*Math.cos(angle),omega.y+R*Math.sin(angle));

                radius=R;
                angle=theta+Math.PI/2+ANGLE;
                var c=createPt(omega.x+R*Math.cos(angle),omega.y+R*Math.sin(angle));

                // 填充
                if(j%2==1){
                    ctx.fillStyle="rgb(45,24,67)";
                }else{
                    ctx.fillStyle=COLORS[(i+j/2)%COLORS.length];
                }
                ctx.beginPath();
                ctx.moveTo(a.x,a.y);
                ctx.lineTo(b.x,b.y);
                ctx.arc(omega.x,omega.y,R,theta-Math.PI/2-ANGLE,theta+Math.PI/2+ANGLE,false);
                ctx.lineTo(c.x,c.y);            
                ctx.closePath();
                ctx.fill();
            }
        }
      
        writeText(ctx,WIDTH/2-30,HEIGHT/2-5,"逆火原创","8px consolas","lightgrey");// 版权
    }
}

/*----------------------------------------------------------
函数:用于绘制实心圆,用途是标记点以辅助作图
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/2120534.html

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

相关文章

HTML 揭秘:HTML 编码快速入门

HTML 揭秘&#xff1a;HTML 编码快速入门 一 . 前端知识介绍二 . HTML 介绍三 . HTML 快速入门四 . HTML 编辑器 - VSCode4.1 插件安装4.2 修改主题配色4.3 修改快捷键4.4 设置自动保存4.5 创建 HTML 文件4.5 书写 HTML 代码4.6 常见快捷键 五 . 基础标签5.1 字体标签5.1.1 col…

SpringCloud之配置中心git示例

SpringCloud之配置中心git示例 随着线上项目变的日益庞大&#xff0c;每个项目都散落着各种配置文件&#xff0c;如果采用分布式的开发模式&#xff0c;需要的配置文件随着 服务增加而不断增多。 某一个基础服务信息变更&#xff0c;都会引起一系列的更新和重启&#xff0c;…

探索有向图与无向图中深度优先搜索(DFS)的边类型——3×3 网格分析

探索有向图与无向图中深度优先搜索(DFS)的边类型——33 网格分析 一、基本概念二、有向图中的 DFS 边类型分析三、有向图 DFS 的 C 代码实现在图的深度优先搜索(DFS)过程中,边的分类对于理解算法的执行流程及其复杂性至关重要。在有向图和无向图中,DFS 过程中遇到的边可以…

【Kafka】分区与复制机制:解锁高性能与容错的密钥

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《大数据前沿&#xff1a;技术与应用并进》&#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、引言 1、kafka简介 2、kafka使用场景 二、Kafka消息可…

【短距离通信】【WiFi】精讲WiFi P2P技术特点及拓扑组成

1. WiFi P2P技术特点 1.1 WiFi P2P定义 WiFi P2P&#xff08;WiFi Peer-to-Peer&#xff09;&#xff0c;也被称为WiFi Direct&#xff0c;是是WiFi联盟发布的一种无线通信技术&#xff0c;允许设备直接相互连接&#xff0c;而无需通过传统的WiFi接入点&#xff08;AP&#x…

【Python篇】matplotlib超详细教程-由入门到精通(下篇)

文章目录 前言第六部分&#xff1a;保存与导出图表6.1 保存为图片文件示例&#xff1a;保存图表为 PNG 文件解释&#xff1a;关键点&#xff1a; 6.2 保存为高分辨率图片示例&#xff1a;保存为高分辨率图片解释&#xff1a; 6.3 保存为不同文件格式示例&#xff1a;保存为不同…

SpringCloudAliaba生成式JavaAI应用开发文生问答音像

采用SpringCloudAliabaAI型式大模型LLM&#xff0c;进行生成式JavaAI应用开发&#xff0c;实现文生问答、图像和语音合成&#xff0c;Web应用页面交互展现。SpringBootGradle软件框架&#xff0c;Idea集成开发环境&#xff0c;API_Post嵌入插件一体测试。 1 工效展示[文生-答/图…

牛津大学:自动发现跨领域高阶抽象泛化框架

随着LLM等技术的快速发展&#xff0c;进一步的抽象和泛化问题亦被看作是未来AI甚至AGI发展的关键。 然而鉴于当前不论是LLM下的自回归AR条件预测Gen方法还是CV领域的diffusion扩散Gen方法&#xff0c;甚至于传统DNN的无监督学习模式&#xff0c;在所涉及的更多通用或领域场景下…

Java+Swing用户信息管理系统

JavaSwing用户信息管理系统 一、系统介绍二、功能展示1.管理员登陆2.用户信息查询3.用户信息添加4.用户信息修改5.用户信息删除 三、系统实现1.UserDao .java 四、其它1.其他系统实现 一、系统介绍 该系统实现了管理员系统登陆、用户信息查询、用户信息添加、用户信息修改、用…

大模型→世界模型下的「认知流形」本质·上

本篇内容节选自今年初我撰写的那篇10万的文章《融合RL与LLM思想&#xff0c;探寻世界模型以迈向AGI》&#xff0c;其观点也是文章中核心中的核心。 想进一步完整阅读电子版的伙伴大家可关注评论联系我&#xff0c;节选内容如下↓ “...存在一个大的开放的tokenization世界。 …

解锁SQL基础应用新境界:从入门到精通的扩展实践指南(SQL扩展)

作者简介&#xff1a;我是团团儿&#xff0c;是一名专注于云计算领域的专业创作者&#xff0c;感谢大家的关注 座右铭&#xff1a; 云端筑梦&#xff0c;数据为翼&#xff0c;探索无限可能&#xff0c;引领云计算新纪元 个人主页&#xff1a;团儿.-CSDN博客 目录 前言&#…

Unity AnimationClip详解(1)

【动画片段】 前文我们介绍了骨骼动画&#xff0c;在Unity中骨骼动画的部分静态数据存储在SkinedMeshRender中&#xff0c;而另一部分动态的关键帧数据就是存储在AnimationClip中的。 关键帧数据来自与FBX、OBJ等动画模型文件&#xff0c;可以在动画导入后的Animation选项卡中…

通信工程学习:什么是GSMP通用交换机管理协议

GSMP&#xff1a;通用交换机管理协议 GSMP&#xff08;General Switch Management Protocol&#xff0c;通用交换机管理协议&#xff09;是一种用于IP交换机对ATM交换机进行控制的协议。以下是对GSMP的详细解释&#xff1a; 一、定义与概述 GSMP是一种异步协议&#xff0c;它在…

Python画笔案例-040 绘制五角星顶圆

1、绘制五角星顶圆 通过 python 的turtle 库绘制五角星顶圆&#xff0c;如下图&#xff1a; 2、实现代码 绘制五角星顶圆&#xff0c;以下为实现代码&#xff1a; """五角星顶圆.py """ import turtledef draw_circle(d):turtle.left(90)for _ …

C#/.NET/.NET Core技术前沿周刊 | 第 4 期(2024年9.1-9.8)

前言 C#/.NET/.NET Core技术前沿周刊&#xff0c;你的每周技术指南针&#xff01;记录、追踪C#/.NET/.NET Core领域、生态的每周最新、最实用、最有价值的技术文章、社区动态、优质项目和学习资源等。让你时刻站在技术前沿&#xff0c;助力技术成长与视野拓宽。 欢迎投稿&…

客户端绑定本地端口与服务器建立连接的详细实现

客户端绑定本地端口与服务器建立连接的详细实现 一、网络编程基础1.1 TCP/IP协议1.2 套接字(Socket)1.3 客户端与服务器模型二、客户端程序的设计2.1 需求分析2.2 流程设计三、具体代码实现3.1 伪代码3.2 C代码实现四、代码详解4.1 初始化套接字库4.2 创建套接字4.3 绑定本地…

嵌入式Linux学习笔记-C语言编译过程

c语言的编译分为4个过程&#xff0c;分别是预处理&#xff0c;编译&#xff0c;汇编&#xff0c;链接。 一、预处理 预处理是c语言编译的第一个阶段&#xff0c;该任务主要由预处理器完成。预处理器会根据预处理指令对源代码进行处理&#xff0c;将预处理指令替换为相应的内容…

Learn ComputeShader 12 Setting up a buffer-based particle effect

unity有自己的粒子系统&#xff0c;但是这次我们要尝试创建一个我们自己的粒子系统&#xff0c;而且使用计算着色器有下面这些好处。总而言之&#xff0c;计算着色器适合处理大规模的数据集。例如&#xff0c;能够高效地处理数万个甚至数百万个粒子的计算。这对于粒子系统这样的…

【HarmonyOS】骨架屏(数据请求回来之前使用组件生成骨架屏,数据回来以后【骨架屏】消失)不会让页面白屏显示空

#骨架屏作用用途 骨架屏用途就是防止用户焦虑&#xff08;为了迷惑用户&#xff09; #效果图 #思路&#xff1a; #步骤&#xff1a; 1.首先是封装一个骨架 &#xff08;所使用的思路就是利用 linearGradient translate animation onAppear 实现骨架的闪光效果&#xff09…

【计算机网络】电路交换、报文交换和分组交换——三种交换方式性能分析

【计算机网络】电路交换、报文交换和分组交换——三种交换方式性能分析 目录 【计算机网络】电路交换、报文交换和分组交换——三种交换方式性能分析电路交换性能分析报文交换性能分析分组交换性能分析对比 电路交换性能分析 4Kb 需要8毫秒 数据传送需要11ms 报文交换性能分…