【Canvas与图标】圆角方块蓝星CSS图标
【成图】
120*120的png图标
大小图：
【代码】
<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head><title>圆角方块蓝星CSS Draft1</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.save();//ctx.fillStyle = "black";//ctx.fillRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);//ctx.restore();const R=210;//基准尺寸// #黑圈ctx.save();var r=R*1.00;var gnt=ctx.createLinearGradient(0,-r,0,r);gnt.addColorStop(0,"rgb(92,92,92)");gnt.addColorStop(0.25,"rgb(143,143,143)");gnt.addColorStop(0.5,"rgb(182,182,182)");gnt.addColorStop(0.75,"rgb(143,143,143)");gnt.addColorStop(1.0,"rgb(66,66,66)");ctx.fillStyle=gnt;drawRoundRect(ctx,0,0,2*r,2*r,R/8);ctx.fill();ctx.restore();// #白底ctx.save();var r=R*0.97;ctx.fillStyle="white";drawRoundRect(ctx,0,0,2*r,2*r,R/8-0.027*R);ctx.fill();ctx.restore();// #四扇ctx.save();var r=R*0.97;drawRoundRect(ctx,0,0,2*r,2*r,R/8-0.027*R);ctx.clip();var colors=[["rgb(44,175,206)","rgb(22,133,191)"],["rgb(11,146,196)","rgb(3,84,155)"],["rgb(40,167,206)","rgb(9,104,172)"],["rgb(72,175,212)","rgb(61,168,202)"],];var N=4;for(var i=0;i<N;i++){var theta=Math.PI/2*i;var l=r*Math.sqrt(2)*2;var a=createPt(-r/3,-r/4);//(0,0);//var b=createPt(a.x+l*Math.cos(theta-Math.PI/4),a.y+l*Math.sin(theta-Math.PI/4));var c=createPt(a.x+l*Math.cos(theta+Math.PI/4),a.y+l*Math.sin(theta+Math.PI/4));var d=createPt(a.x+l/Math.sqrt(2)*Math.cos(theta),a.y+l/Math.sqrt(2)*Math.sin(theta));var f=createPt(a.x+l/Math.sqrt(2)*Math.cos(theta+Math.PI/2),a.y+l/Math.sqrt(2)*Math.sin(theta+Math.PI/2));var e=createPt(r*Math.cos(theta),r*Math.sin(theta));var gnt=ctx.createLinearGradient(a.x,a.y,e.x,e.y);gnt.addColorStop(0,colors[i][0]);gnt.addColorStop(1,colors[i][1]);ctx.fillStyle=gnt;ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.arc(d.x,d.y,l/Math.sqrt(2),theta+Math.PI,theta+Math.PI/2*3,false);ctx.lineTo(c.x,c.y);ctx.arc(f.x,f.y,l/Math.sqrt(2),theta,theta-Math.PI/2,true);ctx.closePath();ctx.fill();}ctx.restore();// #星星ctx.save();var r=R*0.97;var arr=[];arr.push(createPt(r/3,r/4));arr.push(createPt(-r*0.2,r/5));arr.push(createPt(r*0.4,r*0.7));arr.push(createPt(r*0.2,-r*0.7));arr.push(createPt(-r*0.4,r*0.8));arr.push(createPt(-r*0.9,-r*0.8));arr.push(createPt(r*0.3,r*0.4));arr.push(createPt(r*0.8,-r*0.9));arr.push(createPt(-r*0.5,-r*0.5));arr.push(createPt(-r*0.3,-r*0.4));arr.push(createPt(r*0.5,r*0.5));arr.push(createPt(r*0.6,-r*0.4));arr.push(createPt(-r*0.7,-r*0.8));arr.push(createPt(-r*0.9,r*0.1));arr.push(createPt(-r*0.8,r*0.3));arr.push(createPt(-r*0.9,r*0.5));arr.push(createPt(-r*0.8,r*0.7));var starRadius=R/30;var gnt=ctx.createRadialGradient(a.x,a.y,0,a.x,a.y,starRadius);gnt.addColorStop(0,"rgba(74,238,242,0.6)");gnt.addColorStop(1,"rgba(51,200,225,0.2)");for(var i=0;i<arr.length;i++){var a=arr[i];ctx.fillStyle=gnt;draw5Star(ctx,a.x,a.y,starRadius);ctx.fill();} ctx.restore(); // CSSwriteText(ctx,0,r*0.43,"CSS",r*0.9+"px Noto Sans SC Black","black");writeText(ctx,0,r*0.41,"CSS",r*0.9+"px Noto Sans SC Black","white");writeText(ctx,WIDTH/2-30,HEIGHT/2-5,"逆火制图","8px consolas","lightgrey");// 版权}
}/*--------------------------------------------------
函数:绘制正五角星
ctx:绘图上下文
x:五角星中心横坐标
y:五角星中心纵坐标
R:五角星中心到顶点的距离
---------------------------------------------------*/
function draw5Star(ctx,x,y,R){var r=R*Math.sin(Math.PI/10)/Math.sin(Math.PI/10*7);var arr=[0,0,0,0,0,0,0,0,0,0];// 顶五点for(var i=0;i<5;i++){var theta=i*Math.PI/5*2-Math.PI/10;var x1=R*Math.cos(theta)+x;var y1=R*Math.sin(theta)+y;arr[i*2]=createPt(x1,y1);}// 内五点for(var i=0;i<5;i++){var theta=i*Math.PI/5*2+Math.PI/10;var x1=r*Math.cos(theta)+x;var y1=r*Math.sin(theta)+y;arr[i*2+1]=createPt(x1,y1);}ctx.beginPath();for(var i=0;i<arr.length;i++){ctx.lineTo(arr[i].x,arr[i].y);}ctx.closePath();
}/*----------------------------------------------------------
函数:用于绘制圆角矩形
ctx:绘图上下文
x:矩形中心横坐标
y:矩形中心纵坐标
width:矩形宽
height:矩形高
radius:圆角半径
----------------------------------------------------------*/
function drawRoundRect(ctx,x,y,width,height,radius){ctx.beginPath();ctx.moveTo(x-width/2+radius,y-height/2);ctx.lineTo(x+width/2-radius,y-height/2);ctx.arcTo(x+width/2,y-height/2,x+width/2,y-height/2+radius,radius);ctx.lineTo(x+width/2,y-height/2+radius);ctx.lineTo(x+width/2,y+height/2-radius);ctx.arcTo(x+width/2,y+height/2,x+width/2-radius,y+height/2,radius);ctx.lineTo(x+width/2-radius,y+height/2);ctx.lineTo(x-width/2+radius,y+height/2);ctx.arcTo(x-width/2,y+height/2,x-width/2,y+height/2-radius,radius);ctx.lineTo(x-width/2,y+height/2-radius);ctx.lineTo(x-width/2,y-height/2+radius);ctx.arcTo(x-width/2,y-height/2,x-width/2+radius,y-height/2,radius);ctx.closePath();
}/*----------------------------------------------------------
函数:用于绘制矩形
ctx:绘图上下文
x:矩形中心横坐标
y:矩形中心纵坐标
width:矩形宽
height:矩形高
----------------------------------------------------------*/
function drawRect(ctx,x,y,width,height){ctx.beginPath();ctx.moveTo(x-width/2,y-height/2);ctx.lineTo(x+width/2,y-height/2);ctx.lineTo(x+width/2,y+height/2);ctx.lineTo(x-width/2,y+height/2);ctx.closePath();
}/*----------------------------------------------------------
函数:用于绘制实心圆
ctx:绘图上下文
x:矩形中心横坐标
y:矩形中心纵坐标
r:圆半径
style:填充圆的方案
----------------------------------------------------------*/
function drawSolidCircle(ctx,x,y,r,style){ctx.fillStyle=style;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();
}/*-------------------------------------------------------------
学数学的人有个坏习惯，就好像在沙地行走，走几步，就把身后的脚印
抚平，然后假装自己是跳过来的。
更有甚者，假装自己是从天上掉到这里的，或者生下就在这里，什么行走，
一步都没！PS：在时间面前，一切西洋镜都将被戳穿，所以万勿弄虚作假！
--------------------------------------------------------------*/
//-->
</script>
END
相关文章：
【Canvas与图标】圆角方块蓝星CSS图标
【成图】 120*120的png图标 大小图： 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>圆角方块蓝星CSS Draft1</…...
 : 何时开始性能分析)
系统性能分析基本概念（5) : 何时开始性能分析
决定何时开始系统性能优化（Performance Optimization）需要根据系统状态、业务需求和资源可用性来判断。以下是触发性能优化的关键场景和时机，结合系统性能分析（如DRAM读取吞吐量等）的背景，保持简洁且实用&a…...
Python实现Web请求与响应
目录 一、Web 请求与响应基础 （一）Web 请求与响应的定义与组成 （二）HTTP 协议概述 （三）常见的 HTTP 状态码 二、Python 的 requests 库 （一）安装 requests 库 （二…...
机器学习 day05
文章目录 前言一、模型选择与调优1.交叉验证2.超参数搜索 前言 通过今天的学习，我掌握了机器学习中模型的选择与调优，包括交叉验证，超参数搜索的概念与基本用法。 一、模型选择与调优 模型的选择与调优有许多方法，这里主要介绍较…...
CentOS Stream安装MinIO教程
1. 下载 MinIO 二进制文件 # 进入 MinIO 安装目录 sudo cd /usr/local/bin/# 下载 MinIO 二进制文件（替换为最新版本链接） wget https://dl.min.io/server/minio/release/linux-amd64/minio chmod x minio2. 创建专用用户和存储目录 # 创建 minio 用户…...
C#新建打开文件对话框
这是Winform直接封装好的打开文件对话框 using System.Windows.Forms; public static string OpenFile(string path) {OpenFileDialog openFileDialog new OpenFileDialog();// 设置对话框属性openFileDialog.Title "选择文件";openFileDialog.InitialDirectory …...
汇川PLC通过开疆智能Profinet转ModbusTCP网关读取西门子PLC数据案例
本案例是客户通过开疆智能Profient转ModbusTCP网关连接汇川PLC的配置案例 Modbus TCP主站即Modbus TCP客户端，Modbus TCP主站最多支持同时与31个Modbus TCP从站 。（Modbus TCP服务器）进行通信。 第一步设置PLC IP地址； 默认PLC…...
零基础入门：MinerU 和 PyTorch、CUDA的关系
💡一句话总结：MinerU 是一个用 PyTorch 跑模型的程序，PyTorch 支持多种加速方式（如 CUDA、MPS），让它跑得快就需要依赖这些加速工具。 PyTorch官网安装教程（可根据系统情况选择不同版本…...
借助IEDA ，Git版本管理工具快速入门
01 引言 一直使用SVN作为版本管理工具，直到公司新来的一批同事，看到我们使用的SVN都纷纷吐槽，什么年代了，还使用SVN。聊下来，才知道人家公司早早就将SVN切成了Git工具，并吐槽SVN的各种弊端。 既然新的技术…...
三维空间，毫秒即达：RTMP|RTSP播放器在Unity中的落地实现
有人问我：在 Unity 里做超低延迟的直播播放，是什么感觉？ 我说，是把一帧帧流动的时间，嵌进一个三维的空间里。 它不属于现在，也不属于过去。 它属于“实时”——属于那一秒内刚刚发生，却已被你看…...
【计算机网络】HTTP/1.0,HTTP/1.1,HTTP/2,HTTP/3汇总讲解，清晰表格整理面试重点对比
表格汇总 对比维度HTTP/1.0HTTP/1.1HTTP/2HTTP/3传输协议TCPTCPTCP/TLS（默认加密）UDP（基于 QUIC 协议）连接方式短连接（每次请求/响应后断开）引入持久连接（Persistent Connection）&a…...
ubuntu 搭建FTP服务，接收部标机历史音视频上报服务器
1.安装vsftpd 1.1.安装命令 sudo apt update sudo apt install vsftpd 1.2.备份原始配置文件 sudo cp /etc/vsftpd.conf /etc/vsftpd.conf.bak 1.3.配置 vsftpd 编辑配置文件 /etc/vsftpd.conf： sudo vim /etc/vsftpd.conf 将以下参数修改为对应值ÿ…...
一、内存调优
一、内存调优 什么是内存泄漏 监控Java内存的常用工具 内存泄露的常见场景 内存泄露的解决方案 内存泄露与内存溢出的区别 内存泄露：在Java中如果不再使用一个对象，但是该对象依然在GC ROOT的引用链上，这个对象就不会被垃圾回收器回收&…...
IDEA启动报错：Cannot invoke “org.flowable.common.engine.impl.persistence.ent
1.问题 项目启动报错信息 java.lang.NullPointerException: Cannot invoke "org.flowable.common.engine.impl.persistence.ent 2.问题解析 出现这个问题是在项目中集成了Flowable或Activiti工作流，开启自动创建工作流创建的表，因为不同环境的数据…...
从加密到信任|密码重塑车路云一体化安全生态
目录 一、密码技术的核心支撑 二、典型应用案例 三、未来发展方向 总结 车路云系统涉及海量实时数据交互，包括车辆位置、传感器信息、用户身份等敏感数据。其安全风险呈现三大特征： 开放环境威胁：V2X（车与万物互联࿰…...
Java的Filter与Spring的Interceptor的比较
一、技术规范与框架依赖 维度FilterInterceptor所属规范Servlet 规范（Java EE 标准组件）Spring MVC 框架组件（非 Java EE 标准）框架依赖不依赖 Spring，仅需 Servlet 容器（如 Tomcat）依赖 Sprin…...
多线程编程的典型使用场景
前言 在Java开发中，合理使用并发/多线程技术可以显著提升系统性能和资源利用率。本文将通过典型场景代码示例的形式，帮助开发者理解多线程的实际应用价值。 核心使用场景 2.1 高并发请求处理 场景描述： 电商秒杀、票务系统等需要同时处理大…...
grafana dashboard 单位 IEC SI a i
grafana dashboard 画图的时候在 Standard options —> Unit —> Data —> 会有各种选项其中列举以 xxxaxxx 、xxxixxx开头和（IEC) (SI) 注释的，本文进行解释 其中带 a 的基于十进制的单位，使用1000作为基数。1 MB 1000 KB 1000 *…...
WPF···
设置启动页 默认最后一个窗口关闭，程序退出，可以设置 修改窗体的icon图标 修改项目exe图标 双击项目名会看到代码 其他 在A窗体点击按钮打开B窗体，在B窗体设置WindowStartupLocation=“CenterOwner” 在A窗体的代码设置 B.Owner = this; B.Show(); B窗体生成在A窗体中间…...
Git的工作流程
1) 初始化仓库：使用 git init 命令在目录中创建新Git仓库 2) 添加文件到暂存区： - git add <文件名> 添加指定文件 - git add . 添加所有修改文件 3) 提交改动：git commit -m "提交信息"（注意commit正确拼写…...
微服务架构中的多进程通信--内存池、共享内存、socket
目录 1 引言 2 整体架构简介 3 疑问 3.1 我们的共享内存消息机制是用的posix还是system V 3.2 rmmt中，不同线程之间的比如访问同一个内存，用的什么锁控制的 3.3 疑问：假如一个进程发送给了另外两个进程，然后另外两个进程都同…...
电脑中所有word文件图标变白怎么恢复
电脑中的word文件图标变白，如下图所示： 解决方法： 1.winR-->在弹出的运行窗口中输入“regedit”(如下图所示)，点击确定： 2.按照路径“计算机\HKEY_CLASSES_ROOT\Word.Document.12\DefaultIcon”去找到“࿰…...
RK3568 OH5.1 源码编译及问题
安装编译器和二进制工具 在源码根目录下执行prebuilts脚本，安装编译器及二进制工具。 bash build/prebuilts_download.sh在源码根目录执行如下指令安装hb编译工具： python3 -m pip install --user build/hb使用build.sh脚本编译源码 进入源码根目录&…...
Qt5、C++11 获取wifi列表与wifi连接
一、获取wifi列表 .h 文件内容 #include <QWidget> #include <QVBoxLayout> #include <QPushButton> #include <QCheckBox> #include <QListWidget>class Setting : public QWidget {Q_OBJECT public:explicit Setting(QWidget *parent nul…...
【KWDB 2025 创作者计划】_从部署开始了解KWDB
一、概述 KaiwuDB 是一款面向 AIoT 场景的分布式、多模融合、支持原生 AI 的数据库产品，支持同一实例同时建立时序库和关系库并融合处理多模数据，具备时序数据高效处理能力，具有稳定安全、高可用、易运维等特点。面向工业物联网、数字能源、…...
高等数学-微分
一、一元函数： 在实际应用中，经常需要近似计算函数yf(x)的增量Δyf(x)-f(x0)f(x0Δx)-f(x0),其中一种近似称为函数的微分。 定义：若函数yf(x)在点x0处的增量Δy可表达为自变量增量Δx的线性函数AΔx和Δx的高阶无穷小量之和，即Δ…...
有没有开源的企业网盘，是否适合企业使用？
开源选项丰富、灵活定制能力强、需要额外运维投入、适合特定场景但不一定适合所有企业，是开源企业网盘的主要特征。从表面看，开源网盘往往具有免费或低成本优势，但企业要投入一定的人力与技术资源来完成安装、维护与升级，从而保障…...
基于系统整合的WordPress个性化配置方法深度解析：从需求分析到实现过程
文章目录 引言一、理解WordPress页面与文章的区别二、主题与模板层级：自定义的基础三、自定义页面模板：打造专属页面风格四、自定义文章模板：打造个性化文章呈现五、使用自定义字段和元数据：增强内容灵活性六、利用WordPress钩子&…...
离线服务器Python环境配置指南
离线服务器Python环境配置指南：避坑与实战 0. 场景分析：当服务器与世隔绝时 典型困境： 无法访问国际网络（如PyPI、Conda官方源）服务器处于内网隔离环境安全策略限制在线安装 解决方案矩阵： 方法适用场…...
（第94天）OGG 微服务搭建 Oracle 19C CDB 架构同步
前言 Oracle GoldenGate Microservice Architecture (OGGMA) 是在 OGG 12.3 版本推出的全新架构。相比传统架构，OGGMA 基于 Rest API，通过 WEB 界面即可完成 OGG 的配置和监控，大大简化了部署和管理流程。 本文将详细介绍如何在 Oracle 19C CDB 环境中部署 OGG 19.1.0.4 微…...