【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…...
【Axure高保真原型】引导弹窗
今天和大家中分享引导弹窗的原型模板，载入页面后，会显示引导弹窗，适用于引导用户使用页面，点击完成后，会显示下一个引导弹窗，直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...
linux之kylin系统nginx的安装
一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源（HTML/CSS/图片等），响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址，提高安全性 3.负载均衡服务器 支持多种策略分发流量…...
UDP(Echoserver)
网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法：netstat [选项] 功能：查看网络状态 常用选项： n 拒绝显示别名&#…...
1688商品列表API与其他数据源的对接思路
将1688商品列表API与其他数据源对接时，需结合业务场景设计数据流转链路，重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点： 一、核心对接场景与目标 商品数据同步 场景：将1688商品信息…...
LLM基础1_语言模型如何处理文本
基于GitHub项目：https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken：OpenAI开发的专业"分词器" torch：Facebook开发的强力计算引擎，相当于超级计算器 理解词嵌入：给词语画"…...
华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建
华为云FlexusDeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色，华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型，能助力我们轻松驾驭 DeepSeek-V3/R1，本文中将分享如何…...
基于TurtleBot3在Gazebo地图实现机器人远程控制
1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...
【从零学习JVM|第三篇】类的生命周期(高频面试题)
前言： 在Java编程中，类的生命周期是指类从被加载到内存中开始，到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期，让读者对此有深刻印象。 目录 …...
MFC 抛体运动模拟：常见问题解决与界面美化
在 MFC 中开发抛体运动模拟程序时，我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点，详细解析原因并提供解决方案，同时兼顾界面美化，让模拟效果更专业、更高效。 问题一：历史轨迹与小球残影残留 现象 小球运动后，历史位置的 “残影”…...
淘宝扭蛋机小程序系统开发：打造互动性强的购物平台
淘宝扭蛋机小程序系统的开发，旨在打造一个互动性强的购物平台，让用户在购物的同时，能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机，实现旋转、抽拉等动作，增…...