【Canvas与图标】GUI图标

【成图】

120*120的png图标

各种大小图:

【代码】

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head><title>GUI图标 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 = "white";ctx.fillRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);ctx.restore();const R=210;// 基准尺寸// 第1圈ctx.save();var r=R*1.00;drawSolidCircle(ctx,0,0,r,"rgb(36,163,204)");ctx.restore();// 阴影ctx.save();var r=R*0.66;/*  // 辅助线var w=2*r;var h=w*0.65;ctx.fillStyle="red";drawRect(ctx,0,0,w,h);ctx.fill();*/ctx.arc(0,0,R,0,Math.PI*2,false);ctx.clip();var theta=Math.tan(0.65);var a=createPt(r,-r*0.65);var b=createPt(-r,r*0.65);var c=createPt(b.x+2*R*Math.cos(Math.PI/4),b.y+2*R*Math.sin(Math.PI/4));var d=createPt(a.x+2*R*Math.cos(Math.PI/4),a.y+2*R*Math.sin(Math.PI/4));ctx.fillStyle="rgb(28,133,165)";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.closePath();ctx.fill();ctx.restore();// 第2圈ctx.save();var r=R*0.70;var w=2*r;var h=w*0.65;ctx.fillStyle="white";drawRoundRect(ctx,0,0,w,h,r/6);ctx.fill();ctx.restore();// 第3圈ctx.save();var r=R*0.66;var w=2*r;var h=w*0.5;ctx.fillStyle="rgb(29,133,166)";drawRoundRect(ctx,0,r/8,w,h,r/6-R*0.04);ctx.fill();ctx.fillStyle="rgb(29,133,166)";drawRect(ctx,0,-r*0.35,w,r/4)ctx.fill();ctx.restore();// 三个圆ctx.save();var r=R*0.66;drawSolidCircle(ctx,r*0.65,-r*0.57,r/20,"rgb(41,139,174)");drawSolidCircle(ctx,r*0.77,-r*0.57,r/20,"rgb(41,139,174)");drawSolidCircle(ctx,r*0.89,-r*0.57,r/20,"rgb(41,139,174)");ctx.restore();// 文字ctx.save();var r=R*0.66;ctx.textBaseline="middle";ctx.textAlign="center";ctx.font = r*1+"px Stencil Std";ctx.fillStyle="white";ctx.fillText("GUI",0,r*+0.20);ctx.restore();writeText(ctx,WIDTH/2-30,HEIGHT/2-5,"逆火制图","8px consolas","lightgrey");// 版权}
}/*----------------------------------------------------------
函数:用于绘制矩形
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:矩形中心纵坐标
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:矩形中心纵坐标
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.mzph.cn/diannao/62036.shtml

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

相关文章

Spring Boot 整合 ELK 全面指南:实现日志采集、分析与可视化

一、ELK简介 1.1 什么是ELK&#xff1f; ELK 是三个开源工具的组合&#xff1a; Elasticsearch&#xff1a;一个分布式全文搜索和分析引擎&#xff0c;用于存储和查询日志数据。Logstash&#xff1a;一个数据处理管道工具&#xff0c;用于收集、解析和处理日志数据。Kibana&…

数据库编程(sqlite3)

一&#xff1a;数据库分类 常用的数据库 大型数据库 &#xff1a;Oracle商业、多平台、关系型数据库功能最强大、最复杂、市场占比最高的商业数据库 中型数据库 &#xff1a;Server是微软开发的数据库产品&#xff0c;主要支持windows平台 小型数据库 : mySQL是一个小型关系型…

CCF GESP C++ 一级上机题(十六道题及其思路详解合集)

#include <iostream> using namespace std;int main() {// 定义起始年份、结束年份、循环变量以及用于累加的变量&#xff0c;并初始化累加变量为0int start, end, i, sum 0;// 从标准输入读取起始年份和结束年份cin >> start >> end;// 循环遍历从起始年份…

Opencv+ROS实现颜色识别应用

目录 一、工具 二、原理 概念 本质 三、实践 添加发布话题 主要代码 四、成果 五、总结 一、工具 opencvros ubuntu18.04 摄像头 二、原理 概念 彩色图像&#xff1a;RGB&#xff08;红&#xff0c;绿&#xff0c;蓝&#xff09; HSV图像&#xff1a;H&#xff0…

【linux】shell脚本

文章目录 1. jar包启动脚本1.1 方式一1.2 方式二 2. 进程关闭脚本3. 操作mysql4. impala建表语句提取5. 监控磁盘存量6. 清日志脚本7. 替换tomcat的启动端口8. 将一行数据按照空格依次读取 1. jar包启动脚本 1.1 方式一 #!/bin/sh RESOURCE_NAME/usr/local/applications/scre…

Flume和kafka的整合:使用Flume将日志数据抽取到Kafka中

文章目录 1、Kafka作为Source【数据进入到kafka中&#xff0c;抽取出来】2、kafka作为Sink 【数据从别的地方抽取到kafka里面】 1、Kafka作为Source【数据进入到kafka中&#xff0c;抽取出来】 kafka源 --> memory --> 控制台&#xff1a; a1.sources r1 a1.sinks k1…

vue3 reactive响应式实现源码

Vue 3 的 reactive 是基于 JavaScript 的 Proxy 实现的&#xff0c;因此它通过代理机制来拦截对象的操作&#xff0c;从而实现响应式数据的追踪。下面是 Vue 3 的 reactive 源码简化版。 Vue 3 reactive 源码简化版 首先&#xff0c;我们需要了解 reactive 是如何工作的&…

scala模式匹配

object test47 {def main(args: Array[String]): Unit {val id"445646546548858548648"//取出id前两位val provinceid.substring(0,2) // println(province) // if (province"42"){ // println("湖北") // }else if(province&quo…

旋转磁体产生的场 - 实验视频资源下载

先发几个视频&#xff0c;是2019年所作的实验内容 更多视频&#xff0c;到某宝找我吧。注意&#xff1a;是收费的。 20190312-180244-旋转磁体产生的场造成激光功率减小 https://download.csdn.net/download/u014161757/90038058 20190313-090956-旋转磁体产生的场对真空介电…

AI加持,华为全屋智能品牌升级为“鸿蒙智家”

1.传统智能家居的困境&#xff1a;从便利到繁琐 近年来&#xff0c;智能家居因其便捷性和科技感受到消费者的青睐。然而&#xff0c;随着用户需求的多样化&#xff0c;传统智能家居的弊端逐渐显现&#xff1a; 设备连接复杂&#xff0c;品牌间兼容性不足&#xff0c;用户不得不…

【后端面试总结】MySQL索引

数据库索引不只一种实现方法&#xff0c;但是其中最具代表性&#xff0c;也是我们面试中遇到最多的无疑是B树。 索引为什么选择B树 数据量很大的查找&#xff0c;是不能直接放入内存的&#xff0c;而是需要什么数据就通过磁盘IO去获得。 红黑树&#xff0c;AVL树等二叉查找树…

ASP.net WebAPI 上传图片实例(保存显示随机文件名)

[HttpPost]public Task<Hashtable> ImgUpload(){// 检查是否是 multipart/form-dataif (!Request.Content.IsMimeMultipartContent("form-data"))throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);//文件保存目录路径string SaveTempPat…

string类部分(C++)

目录 1. string类 1.1 auto和范围for auto关键词&#xff1a; 范围for&#xff1a; 1.2 string类的常用接口说明 a&#xff09;string类对象的常见构造 b&#xff09; string类对象的容量操作 size与length&#xff1a; capacity: empty: clear: reserve: 1.reserve&am…

Oracle RAC 环境下数据文件误建在本地目录的处理过程

问题描述 在 Oracle RAC 环境中&#xff0c;有时会误将数据文件创建在本地目录&#xff0c;导致其他节点无法访问该数据文件&#xff0c;从而报出 ORA-01157 和 ORA-01110 错误。 问题分析 错误日志 Mon Nov 16 19:02:38 2021 Errors in file /u01/app/oracle/diag/rdbms/orc…

大厂也在用的分布式链路追踪:TraceIdFilter + MDC + Skywalking

痛点 查线上日志时&#xff0c;同一个 Pod 内多线程日志交错&#xff0c;很难追踪每个请求对应的日志信息。 日志收集工具将多个 Pod 的日志收集到同一个数据库中后&#xff0c;情况就更加混乱不堪了。 解决 TraceId MDC 前端每次请求时&#xff0c;添加 X-App-Trace-Id 请…

Dashboard Tactics

1&#xff1a;相关链接Dashboard Tactics :: OpenCPN Dashboard Tactics Plugin rgleason/dashboard_tactics_pi: OpenCPN dashboard built-in plugin merger with external tactics_pi plugin NMEAconverter :: OpenCPN 2&#xff1a;显示样式 3&#xff1a;代码 这个插件…

【leetcode】动态规划

31. 873. 最长的斐波那契子序列的长度 题目&#xff1a; 如果序列 X_1, X_2, ..., X_n 满足下列条件&#xff0c;就说它是 斐波那契式 的&#xff1a; n > 3对于所有 i 2 < n&#xff0c;都有 X_i X_{i1} X_{i2} 给定一个严格递增的正整数数组形成序列 arr &#xff0…

24.11.26 Mybatis2

resultMap 中的标签和属性 如果是主键列 一般用id标签对应 propertyjava对象的属性 column 数据库中的列( javaType实体类数据类型 jdbcType数据库列的数据类型 ) 不需要配置 <id property"empno" column"empno" />如果是普通列 一般用result对…

第六届国际科技创新学术交流大会暨新能源科学与电力工程国际(NESEE 2024)

重要信息 会议官网&#xff1a;nesee.iaecst.org 会议时间&#xff1a;2024年12月6-8日 会议地点&#xff1a; 中国-广州&#xff08;越秀国际会议中心) 大会简介 新能源科学与电力工程国际学术会议&#xff08;NESEE 2024&#xff09;作为第六届国际科技创新学术交流大会分…

随笔20241126 Kafka 消费者的自动提交与手动提交偏移量详解

Kafka 是一种流行的分布式消息系统&#xff0c;用于处理大量实时数据。消费者在消费消息时&#xff0c;需要跟踪其消费的位置&#xff08;即偏移量&#xff0c;offset&#xff09;。对于 Kafka 消费者来说&#xff0c;偏移量的提交是至关重要的&#xff0c;因为它决定了消费者在…