【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…...
华为云AI开发平台ModelArts
华为云ModelArts：重塑AI开发流程的“智能引擎”与“创新加速器”！ 在人工智能浪潮席卷全球的2025年，企业拥抱AI的意愿空前高涨，但技术门槛高、流程复杂、资源投入巨大的现实，却让许多创新构想止步于实验室。数据科学家…...
装饰模式（Decorator Pattern）重构java邮件发奖系统实战
前言 现在我们有个如下的需求，设计一个邮件发奖的小系统， 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其…...
简易版抽奖活动的设计技术方案
1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...
如何在看板中体现优先级变化
在看板中有效体现优先级变化的关键措施包括：采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中，设置任务排序规则尤其重要，因为它让看板视觉上直观地体…...
【第二十一章 SDIO接口(SDIO)】
第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...
linux 错误码总结
1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...
NFT模式：数字资产确权与链游经济系统构建
NFT模式：数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新：构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议：基于LayerZero协议实现以太坊、Solana等公链资产互通，通过零知…...
Java多线程实现之Thread类深度解析
Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...
MySQL 8.0 事务全面讲解
以下是一个结合两次回答的 MySQL 8.0 事务全面讲解，涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容，并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念（ACID） 事务是…...
【Linux】自动化构建-Make/Makefile
前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具：make/makfile 1.背景 在一个工程中源文件不计其数，其按类型、功能、模块分别放在若干个目录中，mak…...