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

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

news 2026/3/31 17:35:01

【成图】

【代码】

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

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

【成图】【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>菊花孔雀螺旋</title><style type"text/css">…...

编程日记 2024/9/10 8:23:49

circuitjs 普通开关和按钮开关

circuitjs 各类开关中最基本的有 (普通)开关和按钮开关(瞬时开关). 添加在菜单 “绘制–无源元件–添加开关” 下可以添加一个普通开关.在菜单 “绘制–无源元件–添加按钮开关” 下可以添加一个按钮开关. 两者在缺省外观上没有什么区别, 如上, 左边是普通开关, 右边是按钮…...

编程日记 2024/9/10 8:22:48

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

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

编程日记 2024/9/10 8:18:44

C++ std::bind函数用法

看一个例子解释用法： TcpServer类的构造函数中定义： acceptor_->setNewConnectionCallback(std::bind(&TcpServer::newConnection, this,std::placeholders::_1, std::placeholders::_2));// 有一个新的客户端的连接，acceptor会执行这…...

编程日记 2024/9/10 8:16:33

Caffenie配合Redis做两级缓存

一、什么是两级缓存在项目中。一级缓存用Caffeine，二级缓存用Redis，查询数据时首先查本地的Caffeine缓存，没有命中再通过网络去访问Redis缓存，还是没有命中再查数据库。具体流程如下二、简单的二级缓存实现-v1 目录结构 2…...

编程日记 2024/9/10 8:14:28

MATLAB实现PID参数自动整定

目录 1、项目说明 2、文件说明 1、项目说明本项目旨在通过 MATLAB 语言实现 PID 参数的自动整定，并设计了一个直观易用的 GUI 界面。该系统特别适用于实验室环境下的 PID 参数自整定任务。整定的核心原则在于优化系统性能，使系统的衰减比尽可能接近理…...

编程日记 2024/9/10 8:13:27

UE5学习笔记21-武器的射击功能

一、创建C类创建武器子弹的类，创建生产武器子弹的类，创建弹壳的类，生产武器子弹的类的父类是武器的类创建后如图，ProjectileMyWeapon类(产生子弹的类)继承自weapon类，Projectile(子弹的类)，Casing(弹壳声…...

编程日记 2024/9/10 8:09:18

Mamba模型学习笔记

笔记来源：bilibili Transformer 的死穴 Transformer 结构的核心是自注意力机制层，无论是 encoder 还是 decoder，序列数据都先经过位置编码后喂给这个模块。但是自注意力机制的计算范围仅限于窗口内，而无法直接处理窗口外的元素…...

编程日记 2024/9/10 8:08:17

android kotlin 基础复习继承 inherit

1、新建文件kt 2、代码： /**用户基类**/ open class Person1(name:String){/**次级构造函数**/constructor(name:String,age:Int):this(name){//初始化println("-------基类次级构造函数---------")println("name:${name},age:${age}")} }/**子…...

编程日记 2024/9/10 8:07:16

读软件设计的要素06概念完整性

1. 概念完整性 1.1. 当概念组合成一个软件时，它们可以同步以便协调行为 1.1.1. 同步可能会消除一个概念的某些行为，但决不会添加与该概念的规范不一致的新行为 1.1.2. 在使用概念设计软件时，即使你没有精确定义同步，至少要说服自…...

编程日记 2024/9/10 8:04:10

Java 每日一刊（第2期）：搭建开发环境

文章目录 JVM、JRE、JDKJVM（Java Virtual Machine，Java 虚拟机）JRE（Java Runtime Environment，Java 运行时环境）JDK（Java Development Kit，Java 开发工具包）JVM、JRE、JD…...

编程日记 2024/9/10 8:03:09

探索EasyCVR与AI技术深度融合：视频汇聚平台的新增长点

随着5G、AI、边缘计算、物联网（IoT）、云计算等技术的快速发展，万物互联已经从概念逐渐转变为现实，AIoT（物联网人工智能）的新时代正在加速到来。在这一背景下，视频技术作为信息传输和交互的重要手…...

编程日记 2024/9/10 8:02:08

IBM中国研发部调整：全球化与本土化的新平衡

如何看待IBM中国研发部裁员？ 近日，IBM中国宣布撤出在华两大研发中心，引发了IT行业对于跨国公司在华研发战略的广泛讨论。这一决定不仅影响了众多IT从业者的职业发展，也让人思考全球化背景下中国IT产业的竞争力和未来发展方向。面对…...

编程日记 2024/9/10 8:00:05

C++入门基础篇

引言说到编程语言常常听到的就是C语言C Java 。C语言是面向过程的，C是和Java是面向对象的，那么什么是面向对象呢？什么又是面向过程呢？C是什么？封装、继承、多态是什么？且听我絮絮叨叨。 C入门基础 1.命名…...

编程日记 2024/9/10 7:58:00

Qt QListWidget 代码范例，以及Qt 天坑：setStyleSheet失效问题

一、坑之所在 1.写了StyleSheet的QString并进行了设置 this->setStyleSheet(styleSheet_M);2.注释后，将StyleSheet换到UI form里去，然后又手动清理了UI form里的StyleSheet 重新使用代码设置，此时代码设置失效了二、根本解决 1.手动从…...

编程日记 2024/9/10 7:54:54

Unity AnimationClip详解（1）

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

编程日记 2024/9/10 7:50:49

在这12种场景下会使Spring事务失效--注意防范

在某些业务场景下，如果一个请求中，需要同事写入多张表的数据，但为了保证操作的原子性（要么同事插入数据成功，要么同事插入失败），例如，当我们创建用户的时候，往往会给用户…...

编程日记 2024/9/10 7:46:44

SOPC:Nios II Processor -＞ Vectors

Reset Vector——复位向量 Exception Vector——执行向量两个向量地址都存储着程序 1.Reset Vector 当FPGA进行复位时，FPGA就重新开始执行程序，这时就需要从EPCS中读取程序。由于FPGA的程序存放在EPC…...

编程日记 2024/9/10 7:45:43

golang学习笔记11——Go 语言的并发与同步实现详解

推荐学习文档基于golang开发的一款超有个性的旅游计划app经历golang实战大纲golang优秀开发常用开源库汇总golang学习笔记01——基本数据类型golang学习笔记02——gin框架及基本原理golang学习笔记03——gin框架的核心数据结构golang学习笔记04——如何真正写好Golang代码&…...

编程日记 2024/9/10 7:44:42

关于汽车加油是加200还是加满的思考

车子快开了1万公里了，每个月保险会送一个200-15的加油优惠券，所以之前一直是每次加200的习惯， 最近突然觉得经常去加油很麻烦，而且很浪费时间， 需要重新评估一下， 一次加200 or 一次加300 or 一次加满&am…...

编程日记 2024/9/10 7:41:36

如何将 iPhone 实况照片传输到电脑：四种最佳方法

实况照片是一种有趣的拍摄形式，它不仅能捕捉静态画面，还能记录下带有动态和声音的短暂瞬间。轻按一张实况照片，它就会 “动起来”，还原拍摄时几秒的动态画面和现场声音。如果你已经掌握了普通照片从 iPhone 传输到电脑的方法&…...

编程新知 2026/3/31 17:11:03

实战避坑：用Playwright+Selenium绕过电商网站验证码的3种方法（附Python代码）

实战避坑：用PlaywrightSelenium绕过电商网站验证码的3种方法（附Python代码） 电商平台的反爬虫机制日益复杂，验证码作为核心防线之一，已经从简单的图文识别升级到行为验证、智能风控等多维度拦截。本文将聚焦淘宝、京东…...

编程新知 2026/3/31 17:06:54

springboot+vue基于web的电脑配件商城的设计系统

目录同行可拿货,招校园代理 ,本人源头供货商系统功能模块划分技术架构设计要点特色功能实现路径安全防护措施扩展性考虑项目技术支持源码获取详细视频演示 ：文章底部获取博主联系方式！同行可合作同行可拿货,招校园代理 ,本人源头供货商系统功能模块…...

编程新知 2026/3/31 16:50:23

手把手教你用SAM2和LoRA：基于CVPR25新思路的开放词汇分割实战（附代码）

手把手教你用SAM2和LoRA：基于CVPR25新思路的开放词汇分割实战（附代码） 开放词汇语义分割（Open-Vocabulary Semantic Segmentation）正成为计算机视觉领域的热点方向。传统语义分割模型受限于预定义的封闭类别&#xff…...

编程新知 2026/3/31 16:21:59

三三复制商业模式系统介绍

三三复制商业模式系统介绍：裂变逻辑与合规落地全解析在数字经济时代，社交电商与分销模式的创新成为企业突破增长瓶颈的关键。三三复制模式以其几何级数的裂变效率、清晰的层级收益结构和低门槛参与机制，在电商、直销等领域展现出强大的生命力…...

编程新知 2026/3/31 16:05:45

Java后端如何优雅地封装第三方API调用逻辑以对接美团外卖霸王餐接口

Java后端如何优雅地封装第三方API调用逻辑以对接美团外卖霸王餐接口在Java后端开发中，对接第三方API（如美团外卖霸王餐接口）是常见的需求。直接在业务代码中拼接URL、处理JSON、写HTTP请求不仅导致代码臃肿，还难以维护和测试。本…...

编程新知 2026/3/31 15:29:14

可视掏耳勺哪个牌子好？用什么掏耳朵最好？掏耳勺神器新款第一名

用什么掏耳朵最好？如今耳道护理成为家庭日常刚需，可视掏耳勺凭借“边看边清洁”的核心优势，彻底解决了传统盲掏易戳伤耳道、推深耳垢的痛点，成为越来越多人的首选。但当前可视掏耳勺市场陷入参数内卷，不少品牌盲目追求…...

编程新知 2026/3/31 14:17:21

开发者的第二曲线：2026年最赚钱的5个技术副业

在技术范式加速重构的2026年，软件质量保障的重要性已从“成本中心”跃升为“价值中心”。对于敏锐的软件测试从业者而言，这不仅是职业的深化，更是将专业壁垒转化为财富增长的绝佳契机。传统的“接私活”模式正在被更具复利效应和杠杆价值的“…...

编程新知 2026/3/31 13:57:12

2026降AI工具实测：性价比/效果/安全选品指南

花了整整一周时间把市面5款主流降AI工具全维度测了一遍，从处理效果、定价、安全性三个核心维度做了横向对比。结论放在最前面：综合实力最强、毕业生首选的是SpeedAI科研小助手，性价比拉满，新手还能免费试用，完全适配绝…...

编程新知 2026/3/31 13:43:07

Mirage Flow 与卷积神经网络（CNN）的跨模态融合应用

Mirage Flow 与卷积神经网络（CNN）的跨模态融合应用你有没有想过，让机器不仅能“看见”图片，还能像人一样“理解”并“描述”图片里的故事？比如，给一张复杂的医学影像，它不仅能圈出病灶&#x…...

编程新知 2026/3/31 13:00:37

【成图】

【代码】

END

相关文章：