【Canvas与徽章】金圈蓝底国庆75周年徽章
【成图】
【代码】
<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head><title>金边黑盾75周年</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;// 基准尺寸// 最外层金边ctx.save();var r=R*1.00;var gnt1=ctx.createLinearGradient(0,-r,0,r);gnt1.addColorStop(0, "rgb(238,230,165)");gnt1.addColorStop(0.25,"rgb(222,183,62)");gnt1.addColorStop(0.5,"rgb(255,255,190)");gnt1.addColorStop(0.6,"rgb(152,97,33)");gnt1.addColorStop(0.8,"rgb(252,238,165)");gnt1.addColorStop(1, "rgb(217,173,74)"); ctx.fillStyle=gnt1;ctx.beginPath();ctx.arc(0,0,r,0,Math.PI*2,false);ctx.closePath();ctx.fill();ctx.restore();// 第一层上半圈渐变外框ctx.save();var ro=R*0.99;// outer radiusvar ri=R*0.91;// inner radiusvar gnt=ctx.createLinearGradient(0,-ro,0,0);gnt.addColorStop(0, "rgb(255,254,250)");gnt.addColorStop(0.5,"rgb(253,221,112)");gnt.addColorStop(0.9,"rgb(254,235,192)");gnt.addColorStop(1,"rgb(254,222,145)");ctx.fillStyle=gnt;ctx.beginPath();ctx.moveTo(ri,0);ctx.lineTo(ro,0);ctx.arc(0,0,ro,0,-Math.PI,true);ctx.lineTo(-ri,0);ctx.arc(0,0,ri,-Math.PI,0,false);ctx.closePath();ctx.fill();ctx.restore();// 第一层下半圈渐变外框ctx.save();var ro=R*0.99;// outer radiusvar ri=R*0.91;// inner radiusvar gnt=ctx.createLinearGradient(0,0,0,ro);gnt.addColorStop(0, "rgb(254,222,145)");gnt.addColorStop(0.10, "rgb(136,60,0)");gnt.addColorStop(0.5,"rgb(245,206,15)");gnt.addColorStop(1,"rgb(255,233,165)");ctx.fillStyle=gnt;ctx.beginPath();ctx.moveTo(ri,0);ctx.lineTo(ro,0);ctx.arc(0,0,ro,0,Math.PI,false);ctx.lineTo(-ri,0);ctx.arc(0,0,ri,Math.PI,0,true);ctx.closePath();ctx.fill();ctx.restore();// 第二层黑圈ctx.save();var r=R*0.90;ctx.fillStyle="black";ctx.beginPath();ctx.arc(0,0,r,0,Math.PI*2,false);ctx.closePath();ctx.fill();ctx.restore();// 第三层金窄圈ctx.save();var ro=R*0.88;// outer radiusvar ri=R*0.86;// inner radiusvar gnt=ctx.createLinearGradient(0,-ro,0,0);gnt.addColorStop(0, "rgb(254,252,239)");gnt.addColorStop(0.5,"rgb(251,218,125)");gnt.addColorStop(0.9,"rgb(255,230,165)");gnt.addColorStop(1,"rgb(90,17,0)");ctx.fillStyle=gnt;ctx.beginPath();ctx.moveTo(ri,0);ctx.lineTo(ro,0);ctx.arc(0,0,ro,0,-Math.PI,true);ctx.lineTo(-ri,0);ctx.arc(0,0,ri,-Math.PI,0,false);ctx.closePath();ctx.fill();ctx.restore();// 第2层下半圈渐变外框ctx.save();var ro=R*0.88;// outer radiusvar ri=R*0.86;// inner radiusvar gnt=ctx.createLinearGradient(0,0,0,ro);gnt.addColorStop(0, "rgb(90,17,0)");gnt.addColorStop(0.5,"rgb(200,139,0)");gnt.addColorStop(1,"rgb(255,233,165)");ctx.fillStyle=gnt;ctx.beginPath();ctx.moveTo(ri,0);ctx.lineTo(ro,0);ctx.arc(0,0,ro,0,Math.PI,false);ctx.lineTo(-ri,0);ctx.arc(0,0,ri,Math.PI,0,true);ctx.closePath();ctx.fill();ctx.restore();// 第4层黑圈ctx.save();var r=R*0.86;ctx.fillStyle="black";ctx.beginPath();ctx.arc(0,0,r,0,Math.PI*2,false);ctx.closePath();ctx.fill();ctx.restore();// 橄榄枝ctx.save();ctx.shadowOffsetY=2; // 设置阴影ctx.shadowColor="grey";ctx.shadowBlur=1;var r=R*0.75;var gnt=ctx.createLinearGradient(0,-r,0,r);gnt.addColorStop(0,"rgb(255,254,237)");gnt.addColorStop(0.25,"rgb(255,221,129)");gnt.addColorStop(0.5,"rgb(254,235,192)");gnt.addColorStop(0.6,"rgb(102,39,4)");gnt.addColorStop(0.75,"rgb(254,185,3)");gnt.addColorStop(1,"rgb(247,222,129)");var N=36;// 左橄榄枝drawLeftOliver(ctx,0,0,r,N,Math.PI/2-Math.PI/48,Math.PI/2*3-Math.PI/8,Math.PI/6,Math.PI/4,gnt);// 右橄榄枝drawRightOliver(ctx,0,0,r,N,-Math.PI/2+Math.PI/8,Math.PI/2+Math.PI/48,Math.PI/6,Math.PI/4,gnt);ctx.restore();// 上方三颗星var ANGLE=Math.PI/7;// 张角var N=3;var PART=ANGLE/(N-1);var r=R*0.75;for(var i=0;i<N;i++){var theta=-Math.PI/2-ANGLE/2+PART*i;var a=createPt(r*Math.cos(theta),r*Math.sin(theta));ctx.save();ctx.translate(a.x,a.y);ctx.rotate(theta+Math.PI/2);ctx.strokeStyle="rgb(254,185,3)";ctx.fillStyle="gold";draw5Star(ctx,0,0,r/16);ctx.fill();ctx.stroke();ctx.restore();}// 左上弯月玻璃光ctx.save();var r=R*0.86;var alpha=Math.asin(0.75);var beta=Math.PI-2*alpha;var gama=Math.PI/2-alpha;var o1=createPt(r/Math.sqrt(2),r/Math.sqrt(2));ctx.fillStyle="rgba(190,190,190,0.3)"; // 填充半透明色ctx.beginPath();ctx.arc(0,0,r,Math.PI/4*5+beta,Math.PI/4*5-beta,true);ctx.arc(o1.x,o1.y,r*1.5,Math.PI/4*5-gama,Math.PI/4*5+gama,false);ctx.closePath();ctx.fill(); ctx.restore();// 第5层黑圈ctx.save();var r=R*0.60;ctx.fillStyle="black";ctx.beginPath();ctx.arc(0,0,r,0,Math.PI*2,false);ctx.closePath();ctx.fill();ctx.restore();// 第6层上半圈渐变外框ctx.save();var ro=R*0.63;// outer radiusvar ri=R*0.50;// inner radiusvar gnt=ctx.createLinearGradient(0,-ro,0,0);gnt.addColorStop(0, "rgb(255,254,250)");gnt.addColorStop(0.5,"rgb(253,221,112)");gnt.addColorStop(0.9,"rgb(254,235,192)");gnt.addColorStop(1,"rgb(254,222,145)");ctx.fillStyle=gnt;ctx.beginPath();ctx.moveTo(ri,0);ctx.lineTo(ro,0);ctx.arc(0,0,ro,0,-Math.PI,true);ctx.lineTo(-ri,0);ctx.arc(0,0,ri,-Math.PI,0,false);ctx.closePath();ctx.fill();ctx.restore();// 第6层下半圈渐变外框ctx.save();var ro=R*0.63;// outer radiusvar ri=R*0.50;// inner radiusvar gnt=ctx.createLinearGradient(0,0,0,ro);gnt.addColorStop(0, "rgb(254,222,145)");gnt.addColorStop(0.10, "rgb(136,60,0)");gnt.addColorStop(0.5,"rgb(245,206,15)");gnt.addColorStop(1,"rgb(255,233,165)");ctx.fillStyle=gnt;ctx.beginPath();ctx.moveTo(ri,0);ctx.lineTo(ro,0);ctx.arc(0,0,ro,0,Math.PI,false);ctx.lineTo(-ri,0);ctx.arc(0,0,ri,Math.PI,0,true);ctx.closePath();ctx.fill();ctx.restore();// 最外层金边ctx.save();var r=R*0.50;var gnt1=ctx.createLinearGradient(0,-r,0,r);gnt1.addColorStop(0, "rgb(238,230,165)");gnt1.addColorStop(0.25,"rgb(222,183,62)");gnt1.addColorStop(0.5,"rgb(255,255,190)");gnt1.addColorStop(0.6,"rgb(152,97,33)");gnt1.addColorStop(0.8,"rgb(252,238,165)");gnt1.addColorStop(1, "rgb(217,173,74)"); ctx.fillStyle=gnt1;ctx.beginPath();ctx.arc(0,0,r,0,Math.PI*2,false);ctx.closePath();ctx.fill();ctx.restore();// 蓝黑辐射渐变底ctx.save(); var r=R*0.49;var gnt=ctx.createRadialGradient(0,0,0,0,0,r);gnt.addColorStop(0,"rgb(22,74,159)");gnt.addColorStop(1,"rgb(7,4,20)");ctx.fillStyle=gnt;ctx.beginPath();ctx.arc(0,0,r,0,Math.PI*2,false);ctx.closePath();ctx.fill();ctx.restore();// 75ctx.save();r=R*0.49;var x=0,y=r/11*7;var word="75";ctx.textBaseline="bottom";ctx.textAlign="center";ctx.font = r/0.8+"px consolas";ctx.fillStyle=gnt1;ctx.fillText(word,x,y);ctx.strokeStyle="gold";ctx.strokeText(word,x,y);ctx.restore();// YEARSctx.save();r=R*0.49;var x=0,y=r/1.4;var word="YEARS";ctx.textBaseline="bottom";ctx.textAlign="center";ctx.font = r/3.5+"px consolas";ctx.fillStyle="rgb(68,41,11)";ctx.fillText(word,x,y);ctx.strokeStyle="gold";ctx.strokeText(word,x,y);ctx.restore();// 中心上方波浪玻璃光ctx.save();var r=R*0.49; ctx.fillStyle=gnt;ctx.fillStyle="rgba(210,0,210,0.2)"; // 填充半透明紫色ctx.beginPath();ctx.arc(0,0,r,Math.PI,Math.PI*2,false);ctx.quadraticCurveTo(r/2,-r/4,0,0);ctx.quadraticCurveTo(-r/2,r/4,-r,0);ctx.fill();ctx.restore();writeText(ctx,WIDTH/2-30,HEIGHT/2-5,"逆火制图","8px consolas","lightgrey");// 版权}
}/*----------------------------------------------------------
函数:画顺时针橄榄枝
x:横坐标
y:纵坐标
r:橄榄枝中心半径
n:叶片对数
start：起始角度
end:中止角度
alpha： 叶片中线到圆弧的角度
beta：叶片中线到圆弧的角度
color:叶片颜色
----------------------------------------------------------*/
function drawLeftOliver(ctx,x,y,r,n,start,end,alpha,beta,color){const R=r; // 橄榄枝中心半径var N=n; // 有N对叶片 const START=start; // 起始角度const END=end; // 中止角度const STEP=(END-START)/N;// 步长 const ALPHA=alpha; // 叶片中线到圆弧的角度const L=R/8; // 叶片长度const BETA=beta; // 叶片中线到圆弧的角度ctx.save(); ctx.translate(x,y);ctx.rotate(STEP);ctx.lineWidth=1;ctx.strokeStyle=color;// 画中心圈ctx.beginPath();for(var i=0;i<N;i++){var theta=START+STEP*i;var r=R;var a=createPt(r*Math.cos(theta),r*Math.sin(theta));ctx.lineTo(a.x,a.y); }ctx.stroke();// 画外侧叶子for(var i=0;i<N;i++){var theta=START+STEP*i;var r=R;var a=createPt(r*Math.cos(theta),r*Math.sin(theta));var ratio=1-i/N*0.5;r=L/9;r=r*ratio;var angle=theta+ALPHA;var b=createPt(a.x+r*Math.cos(angle),a.y+r*Math.sin(angle));r=L/9*4/Math.cos(BETA);r=r*ratio;angle=theta+ALPHA+BETA;var d=createPt(b.x+r*Math.cos(angle),b.y+r*Math.sin(angle));r=L/9*4/Math.cos(BETA);r=r*ratio;angle=theta+ALPHA-BETA;var e=createPt(b.x+r*Math.cos(angle),b.y+r*Math.sin(angle));r=L;r=r*ratio;angle=theta+ALPHA;var c=createPt(a.x+r*Math.cos(angle),a.y+r*Math.sin(angle));ctx.fillStyle=color;ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.lineTo(b.x,b.y);ctx.quadraticCurveTo(d.x,d.y,c.x,c.y);ctx.quadraticCurveTo(e.x,e.y,b.x,b.y); ctx.closePath(); ctx.fill();}// 画内侧叶子for(var i=0;i<N;i++){var theta=START+STEP*i;var r=R;var a=createPt(r*Math.cos(theta),r*Math.sin(theta));var ratio=1-i/N*0.5;r=L/9;r=r*ratio;var angle=theta-ALPHA+Math.PI;var b=createPt(a.x+r*Math.cos(angle),a.y+r*Math.sin(angle)); r=L/9*4/Math.cos(BETA);r=r*ratio;angle=theta-ALPHA+Math.PI+BETA;var d=createPt(b.x+r*Math.cos(angle),b.y+r*Math.sin(angle));r=L/9*4/Math.cos(BETA);r=r*ratio;angle=theta-ALPHA+Math.PI-BETA;var e=createPt(b.x+r*Math.cos(angle),b.y+r*Math.sin(angle));r=L;r=r*ratio;angle=theta-ALPHA+Math.PI;var c=createPt(a.x+r*Math.cos(angle),a.y+r*Math.sin(angle));ctx.fillStyle=color;ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.lineTo(b.x,b.y);ctx.quadraticCurveTo(d.x,d.y,c.x,c.y);ctx.quadraticCurveTo(e.x,e.y,b.x,b.y); ctx.closePath(); ctx.fill();} ctx.restore();
}/*----------------------------------------------------------
函数:画逆时针橄榄枝
x:横坐标
y:纵坐标
r:橄榄枝中心半径
n:叶片对数
start：起始角度
end:中止角度
alpha： 叶片中线到圆弧的角度
beta：叶片中线到圆弧的角度
color:叶片颜色
----------------------------------------------------------*/
function drawRightOliver(ctx,x,y,r,n,start,end,alpha,beta,color){const R=r; // 橄榄枝中心半径var N=n; // 有N对叶片 const START=start; // 起始角度const END=end; // 中止角度const STEP=(END-START)/N;// 步长 const ALPHA=alpha; // 叶片中线到圆弧的角度const L=R/8; // 叶片长度const BETA=beta; // 叶片中线到圆弧的角度ctx.save();ctx.translate(x,y);ctx.lineWidth=1;ctx.strokeStyle=color;// 画中心圈ctx.beginPath();for(var i=0;i<N;i++){var theta=START+STEP*i;var r=R;var a=createPt(r*Math.cos(theta),r*Math.sin(theta));ctx.lineTo(a.x,a.y); }ctx.stroke();// 画外侧叶子for(var i=0;i<N;i++){var theta=START+STEP*i;var r=R;var a=createPt(r*Math.cos(theta),r*Math.sin(theta));var ratio=0.5+i/N*0.5;r=L/9;r*=ratio;var angle=theta-ALPHA;var b=createPt(a.x+r*Math.cos(angle),a.y+r*Math.sin(angle));r=L/9*4/Math.cos(BETA);r*=ratio;angle=theta-ALPHA+BETA;var d=createPt(b.x+r*Math.cos(angle),b.y+r*Math.sin(angle));r=L/9*4/Math.cos(BETA);r*=ratio;angle=theta-ALPHA-BETA;var e=createPt(b.x+r*Math.cos(angle),b.y+r*Math.sin(angle));r=L;r*=ratio;angle=theta-ALPHA;var c=createPt(a.x+r*Math.cos(angle),a.y+r*Math.sin(angle));ctx.fillStyle=color;ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.lineTo(b.x,b.y);ctx.quadraticCurveTo(d.x,d.y,c.x,c.y);ctx.quadraticCurveTo(e.x,e.y,b.x,b.y); ctx.closePath(); ctx.fill();}// 画内侧叶子for(var i=0;i<N;i++){var theta=START+STEP*i;var r=R;var a=createPt(r*Math.cos(theta),r*Math.sin(theta));r=L/9;var angle=theta+ALPHA-Math.PI;var b=createPt(a.x+r*Math.cos(angle),a.y+r*Math.sin(angle));var ratio=0.5+i/N*0.5;r=L/9*4/Math.cos(BETA);r*=ratio;angle=theta+ALPHA-Math.PI+BETA;var d=createPt(b.x+r*Math.cos(angle),b.y+r*Math.sin(angle));r=L/9*4/Math.cos(BETA);r*=ratio;angle=theta+ALPHA-Math.PI-BETA;var e=createPt(b.x+r*Math.cos(angle),b.y+r*Math.sin(angle));r=L;r*=ratio;angle=theta+ALPHA-Math.PI;var c=createPt(a.x+r*Math.cos(angle),a.y+r*Math.sin(angle));ctx.fillStyle=color;ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.lineTo(b.x,b.y);ctx.quadraticCurveTo(d.x,d.y,c.x,c.y);ctx.quadraticCurveTo(e.x,e.y,b.x,b.y); ctx.closePath(); ctx.fill();} ctx.restore();
}/*--------------------------------------------------
函数:绘制正五角星
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:矩形中心纵坐标
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="middle";ctx.textAlign="center";ctx.font = font;ctx.fillStyle=color;ctx.fillText(text,x,y);ctx.restore();
}/*-------------------------------------------------------------
印度人的勤奋不是自发的，而是贫穷和阶级压制迫使的。
他们拼命内卷加班或打螺丝送快递，不是为了追求自己的理想和目标，
而仅仅是为了在大城市有个地方睡，有口吃食能活下去......
--------------------------------------------------------------*/
//-->
</script>
END
相关文章：
【Canvas与徽章】金圈蓝底国庆75周年徽章
【成图】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>金边黑盾75周年</title><style type"text/css"&g…...
Java Servlet 详解
Java Servlet 是 Java 企业级应用 中的一个核心组件，特别是在 Web 应用开发中，它为服务器端处理请求提供了基础。每次用户发出请求时，Servlet 都会动态生成响应，这在构建复杂、交互式的 Web 应用时尤为重要。 什么是 Servlet&am…...
yolov8/9/10模型在安全帽、安全衣检测中的应用【代码+数据集+python环境+GUI系统】
yolov8910模型安全帽、安全衣检测中的应用【代码数据集python环境GUI系统】 yolov8/9/10模型在安全帽、安全衣检测中的应用【代码数据集python环境GUI系统】 背景意义 安全帽和安全衣在工业生产、建筑施工等高风险作业环境中是保护工人免受意外伤害的重要装备。然而࿰…...
算力共享系统中数据平面和控制平面
目录 算力共享系统中数据平面和控制平面 数据平面 控制平面 算力共享系统举例 控制流程和业务流程，在算力共享系统中举例说明 控制流程 业务流程 算力共享系统中数据平面和控制平面 在算力共享系统中，数据平面和控制平面是两个关键组成部分，它们各自承担着不同的角色…...
C++语言学习(4): identifier 的概念
1. 什么是 identifier identifier 中文意思是标识符，在 cppreference 中明确提到，identifier 是任意长度的数字、下划线、大写字母、小写字母、unicode 字符 的序列： An identifier is an arbitrarily long sequence of digits, underscores…...
浅谈计算机神经网络基础与应用
1. 绪论 随着科技的飞速发展，人工智能（AI）已经逐渐渗透到我们生活的方方面面。作为AI技术的核心组成部分，神经网络在推动这一领域的发展上扮演着至关重要的角色。本报告旨在探讨AI中的不同类型神经网络及其在实际应用中的表现和影响。我们将从神经网络的基本概念入手，逐步…...
【SpringBoot详细教程】-08-MybatisPlus详细教程以及SpringBoot整合Mybatis-plus【持续更新】
目录 🌲 MyBatis Plus 简介 🌾入门案例 🌾 MP 简介 🌲 MP 的CRUD 🌾 新增 🌾 删除 🌾 修改在进行 🌾 根据ID查询 🌾 查询所有 🌲 分页功能 🌾 设置分页参数 🌾 设置分页拦截器 🌲 优化启动 🌾 取消mbatisPlusBanner 🌾 取消Sprin…...
[20241002] OpenAI融资文件曝光，ChatGPT年收入涨4倍，月费5年内翻倍
智东西9月29日消息，据《纽约时报》9月27日报道，OpenAI的内部文件显示，该公司在8月份的月收入达到3亿美元，自2023年初以来增长了1700%，预计今年年度销售额将达到37亿美元，其中ChatGPT将带来27亿美元的收入。…...
工业缺陷检测——Windows 10本地部署AnomalyGPT工业缺陷检测大模型
0. 引言 在缺陷检测中，由于真实世界样本中的缺陷数据极为稀少，有时在几千甚至几万个样品中才会出现一个缺陷数据。因此，以往的模型只需在正常样本上进行训练，学习正常样品的数据分布。在测试时，需要手动指定阈值来区分…...
单元测试进阶-Mock使用和插桩
目录 一、基本概念 1、Mock 2、插桩（Sutbbing） 二、参考文章 一、基本概念 1、Mock Mock的作用就是不直接new对象，而是使用Mock方法或者注解Mock一个对象。 这个对象他不是new创建的对象，Mock对该对象的一些成员变量和方法…...
适用conda安装虚拟的python3环境
由于jupyter notebook 7以上的版本与jupyter_contrib_nbextensions存在冲突，导致以前使用顺手的插件无法使用了，就考虑建立一个虚拟环境，在里面使用jupyter notebook 6，以便和jupyter_contrib_nbextensions兼容。 conda简介和优势 Conda 是一个包管理器和环境管理器，它不…...
【C++】“list”的介绍和常用接口的模拟实现
【C】“list”的介绍和常用接口的模拟实现 一. list的介绍1. list常见的重要接口2. list的迭代器失效 二. list常用接口的模拟实现（含注释）三. list与vector的对比 一. list的介绍 list是可以在常数范围内在任意位置进行插入和删除的序列式容器…...
第九篇——数列和级数(二)：传销骗局的数学原理
目录 一、背景介绍二、思路&方案三、过程1.思维导图2.文章中经典的句子理解3.学习之后对于投资市场的理解4.通过这篇文章结合我知道的东西我能想到什么？ 四、总结五、升华 一、背景介绍 文章不长，但是道理深刻；相邻两个数的差值…...
docker如何查看容器的ip
要查看Docker容器的IP地址，可以使用以下几种方法： 使用docker inspect命令： docker inspect -f {{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}} <容器ID或名称> 使用docker ps和docker inspect组合： 首先查看正…...
Mysql ONLY_FULL_GROUP_BY模式详解、group by非查询字段报错
文章目录 一、问题报错二、ONLY_FULL_GROUP_BY模式2.1、什么是ONLY_FULL_GROUP_BY？2.2、为什么要使用ONLY_FULL_GROUP_BY？2.3、查看sql_mode 三、解决方法3.1、关闭only_full_group_by模式3.1.1、方法一：关闭当前会话中的only_full_group_by3…...
设计模式（2）工厂模式
让一个工厂类去生产出对象 （new ）来。 我们想要一个 形状，我们用工厂去生产出，圆形，方形。 package com.example.factory2;public interface Shape {void draw(); }public class Square implements Shape {Overridep…...
二分查找算法专题（1）
找往期文章包括但不限于本期文章中不懂的知识点： 个人主页：我要学编程(ಥ_ಥ)-CSDN博客 所属专栏： 优选算法专题 目录 二分查找算法的介绍 704. 二分查找 34. 在排序数组中查找元素的第一个和 最后一个位置 35. 搜索插入位置 69. x的平…...
ACP科普：SoS不是救命
Scrum of Scrums（SoS）是一种用于协调多个Scrum团队之间工作的扩展框架，特别适用于大型项目或组织中有多个团队同时进行开发的情况。它帮助团队在保持敏捷性的同时，解决跨团队的依赖和协调问题。以下是对Scrum of Scrums的详细介绍…...
C++：模拟实现vector
目录 成员变量与迭代器 size capacity empty 迭代器有关函数 实现默认成员函数的前置准备 reserve 编辑 编辑 push_back 构造函数 无参构造 迭代器区间构造 n个val来进行构造 析构函数 拷贝构造函数 赋值重载 增删查改 clear resize pop_back inser…...
Leecode SQL 184. Department Highest Salary 找出tie
Department Highest Salary 注意！要找出 tie 的 highest salary！ Write a solution to find employees who have the highest salary in each of the departments. Return the result table in any order. The result format is in the following ex…...
Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）
目录 1.TCP的连接管理机制（1）三次握手①握手过程②对握手过程的理解 （2）四次挥手（3）握手和挥手的触发（4）状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接：3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯，要想要能够将所有的电脑解锁&#x…...
全球首个30米分辨率湿地数据集(2000—2022)
数据简介 今天我们分享的数据是全球30米分辨率湿地数据集，包含8种湿地亚类，该数据以0.5X0.5的瓦片存储，我们整理了所有属于中国的瓦片名称与其对应省份，方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...
【单片机期末】单片机系统设计
主要内容：系统状态机，系统时基，系统需求分析，系统构建，系统状态流图 一、题目要求 二、绘制系统状态流图 题目：根据上述描述绘制系统状态流图，注明状态转移条件及方向。 三、利用定时器产生时…...
Spring Boot面试题精选汇总
🤟致敬读者 🟩感谢阅读🟦笑口常开🟪生日快乐⬛早点睡觉 📘博主相关 🟧博主信息🟨博客首页🟫专栏推荐🟥活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...
MySQL中【正则表达式】用法
MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现（两者等价），用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例： 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...
ArcGIS Pro制作水平横向图例+多级标注
今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作：ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等（ArcGIS出图图例8大技巧），那这次我们看看ArcGIS Pro如何更加快捷的操作。…...
C++使用 new 来创建动态数组
问题： 不能使用变量定义数组大小 原因： 这是因为数组在内存中是连续存储的，编译器需要在编译阶段就确定数组的大小，以便正确地分配内存空间。如果允许使用变量来定义数组的大小，那么编译器就无法在编译时确定数组的大…...
站群服务器的应用场景都有哪些？
站群服务器主要是为了多个网站的托管和管理所设计的，可以通过集中管理和高效资源的分配，来支持多个独立的网站同时运行，让每一个网站都可以分配到独立的IP地址，避免出现IP关联的风险，用户还可以通过控制面板进行管理功…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能
1. 开发环境准备 安装DevEco Studio 3.1： 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK 项目配置： // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...