【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…...
业务系统对接大模型的基础方案：架构设计与关键步骤
业务系统对接大模型：架构设计与关键步骤 在当今数字化转型的浪潮中，大语言模型（LLM）已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中，不仅可以优化用户体验，还能为业务决策提供…...
iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘
美国西海岸的夏天，再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至，这不仅是开发者的盛宴，更是全球数亿苹果用户翘首以盼的科技春晚。今年，苹果依旧为我们带来了全家桶式的系统更新，包括 iOS 26、iPadOS 26…...
【Linux】shell脚本忽略错误继续执行
在 shell 脚本中，可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行，可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令，并忽略错误 rm somefile…...
以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：
一、属性动画概述NETX 作用：实现组件通用属性的渐变过渡效果，提升用户体验。支持属性：width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项： 布局类属性（如宽高）变化时&#…...
关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案
问题描述：iview使用table 中type: "index",分页之后 ，索引还是从1开始，试过绑定后台返回数据的id, 这种方法可行，就是后台返回数据的每个页面id都不完全是按照从1开始的升序，因此百度了下，找到了…...
Mac软件卸载指南，简单易懂！
刚和Adobe分手，它却总在Library里给你写"回忆录"？卸载的Final Cut Pro像电子幽灵般阴魂不散？总是会有残留文件，别慌！这份Mac软件卸载指南，将用最硬核的方式教你"数字分手术"࿰…...
python如何将word的doc另存为docx
将 DOCX 文件另存为 DOCX 格式（Python 实现） 在 Python 中，你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是，.doc 是旧的 Word 格式，而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...
Ascend NPU上适配Step-Audio模型
1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统，支持多语言对话（如 中文，英文，日语），语音情感（如 开心，悲伤）&#x…...
NLP学习路线图（二十三）：长短期记忆网络（LSTM）
在自然语言处理（NLP）领域，我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感，还是实现语言的翻译，都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心，而循环神经网络（RNN） 曾被视为…...
mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包
文章目录 现象：mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时，可能是因为以下几个原因：1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...