【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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/437292.html

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

相关文章

sql语句牛客练习

sql语句牛客练习

文章目录 1. SQL21 浙江大学用户题目回答情况① 错误② 正确 2. SQL22 统计每个学校的答过题的用户的平均答题数① 错误② 正确 3. SQL23 统计每个学校各难度的用户平均刷题数4. SQL25 查找山东大学或者性别为男生的信息① 错误② 正确 5. SQL26 计算25岁以上和以下的用户数量①…
阅读更多...
Linux相关概念和重要知识点（11）（进程调度、Linux内核链表）

Linux相关概念和重要知识点（11）（进程调度、Linux内核链表）

1.Linux调度算法 上篇文章我粗略讲过queue[140]的结构&#xff0c;根据哈希表&#xff0c;我们可以将40个不同优先级的进程借助哈希桶链入queue[140]中。调度器会根据queue的下标来进行调度。但这个具体的调度过程是怎样的呢&#xff1f;以及runqueue和queue[140]的关系是什么…
阅读更多...
DC00025【含论文】基于协同过滤推荐算法springboot视频推荐管理系统

DC00025【含论文】基于协同过滤推荐算法springboot视频推荐管理系统

1、项目功能演示 DC00025【含文档】基于springboot短视频推荐管理系统协同过滤算法视频推荐系统javaweb开发程序设计vue 2、项目功能描述 短视频推荐系统分为用户和系统管理员两个角色 2.1 用户角色 1、用户登录、用户注册 2、视频中心&#xff1a;信息查看、视频收藏、点赞、…
阅读更多...
Leecode热题100-84.柱状图中的最大矩形

Leecode热题100-84.柱状图中的最大矩形

给定 n 个非负整数&#xff0c;用来表示柱状图中各个柱子的高度。每个柱子彼此相邻&#xff0c;且宽度为 1 。 求在该柱状图中&#xff0c;能够勾勒出来的矩形的最大面积。 示例 1: 输入&#xff1a;heights [2,1,5,6,2,3] 输出&#xff1a;10 解释&#xff1a;最大的矩形为图…
阅读更多...
Python核心知识：pip使用方法大全

Python核心知识：pip使用方法大全

什么是 pip&#xff1f; pip 是 Python 的包管理工具&#xff0c;允许用户安装、升级和管理 Python 的第三方库和依赖。它极大地简化了开发过程&#xff0c;使开发者可以轻松地获取并安装所需的软件包。pip 已成为 Python 项目中最常见的包管理工具&#xff0c;并且自 Python …
阅读更多...
SQL第10课挑战题

SQL第10课挑战题

1. 从OrderItems表中返回每个订单号order_num各有多少行数order_lines&#xff0c;并按order_lines对结果进行排序 2. 返回名为cheapest_item的字段&#xff0c;该字段包含每个供应商成本最低的产品&#xff08;使用products表中的prod_price)&#xff0c;然后从最低成本到最高…
阅读更多...
房屋水电费：重新布局，重构JS代码

房屋水电费：重新布局，重构JS代码

<!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>房租水电费</title><script type"…
阅读更多...
计算机网络：计算机网络概述：网络、互联网与因特网的区别

计算机网络：计算机网络概述：网络、互联网与因特网的区别

文章目录 网络、互联网与因特网的区别网络分类 互联网因特网基于 ISP 的多层次结构的互连网络因特网的标准化工作因特网管理机构因特网的组成 网络、互联网与因特网的区别 若干节点和链路互连形成网络&#xff0c;若干网络通过路由器互连形成互联网 互联网是全球范围内的网络…
阅读更多...
「安装」 Windows下安装CUDA和Pytorch

「安装」 Windows下安装CUDA和Pytorch

「安装」 Windows下安装CUDA和Pytorch 文章目录 「安装」 Windows下安装CUDA和PytorchMac、Linux、云端Windows安装CUDA安装miniconda安装PyTorch测试总结 其他 Mac、Linux、云端 Mac、Linux、云端安装Miniconda和Pytorch的方法参考其他资料。 Windows 下面进行Windows下安装…
阅读更多...
VB.net读写NDEF标签URI智能海报WIFI蓝牙连接

VB.net读写NDEF标签URI智能海报WIFI蓝牙连接

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 Public Class Form1Dim oldpicckey(0 To 5) As Byte 卡片旧密码Dim newpicckey(0 To 5) As Byte 卡片新密码Function GetTagUID() As StringDim status As ByteDim myctrlword As …
阅读更多...
Python编程和开发过程中让人编程效率和舒适度很高的工具Anaconda

Python编程和开发过程中让人编程效率和舒适度很高的工具Anaconda

编程工作为什么需要提高效率&#xff1f; 在日益繁忙的工作环境中&#xff0c;选择合适的编程工具已成为提升开发者工作效率的关键。不同的工具能够帮助我们简化代码编写、自动化任务、提升调试速度&#xff0c;甚至让团队协作更加顺畅。 那么&#xff0c;编写python代码过程中…
阅读更多...
c#使用winscp库实现FTP/SFTP/SCP的获取列表、上传和下载功能

c#使用winscp库实现FTP/SFTP/SCP的获取列表、上传和下载功能

网上写c#调用winscp实现的资料很少&#xff0c;且写的不够详细。本人查了下winscp的libraries说明&#xff0c;写了个小工具&#xff0c;供大家参考。 winscp的接口说明地址如下&#xff1a; WinSCP .NET Assembly and COM Library :: WinSCP 一、先展示一下小工具的界面 1、…
阅读更多...
资源《Arduino 扩展板3-WS2812》说明。

资源《Arduino 扩展板3-WS2812》说明。

资源链接&#xff1a; Arduino 扩展板3-WS2812 1.文件明细&#xff1a; 2.文件内容说明 包含&#xff1a;AD工程、原理图、PCB。 3.内容展示 4.简述 该文件为PCB工程&#xff0c;采用AD做的。 该文件打板后配合Arduino使用&#xff0c;属于Arduino的扩展板。 该文件主要…
阅读更多...
AI助力CMIP6数据处理技术及在气候变化、生态农业、水文多领域实践应用

AI助力CMIP6数据处理技术及在气候变化、生态农业、水文多领域实践应用

查看原文>>>AI助力CMIP6数据处理技术及在气候变化、生态农业、水文多领域实践应用 目录 专题一 CMIP6中的模式比较计划 专题二 数据下载 专题三 基础知识3.1 Python基础 专题四 单点降尺度 专题五 统计方法的区域降尺度 专题六 基于WRF模式的动力降尺度 专题七…
阅读更多...
RabbitMQ的相关题

RabbitMQ的相关题

一、 MQ的作⽤及应⽤场景 类似问题： 项⽬什么场景下使⽤到了MQ, 为什么需要MQ？ RabbitMQ 的作⽤？使⽤场景有哪些？ RabbitMQ…
阅读更多...
【Linux】第一个小程序——进度条实现

【Linux】第一个小程序——进度条实现

&#x1f525; 个人主页&#xff1a;大耳朵土土垚 &#x1f525; 所属专栏&#xff1a;Linux系统编程 这里将会不定期更新有关Linux的内容&#xff0c;欢迎大家点赞&#xff0c;收藏&#xff0c;评论&#x1f973;&#x1f973;&#x1f389;&#x1f389;&#x1f389; 文章目…
阅读更多...
Docker仓库搭建

Docker仓库搭建

目录 一、Docker Hub 二、私有Registry仓库搭建 1、下载并开启仓库镜像registry 2、Registry加密传输 3、建立一个registry仓库 4、为客户端建立证书 5、测试 6、为仓库建立登录认证 三、Harbor仓库搭建 Docker 仓库&#xff08;Docker Registry&#xff09; 是用于存…
阅读更多...
PHP程序如何实现限制一台电脑登录？

PHP程序如何实现限制一台电脑登录？

PHP程序如何实现限制一台电脑登录&#xff1f; 可以使用以下几种方法&#xff1a; 1. IP地址限制&#xff1a;在PHP中&#xff0c;可以通过获取客户端的IP地址&#xff0c;然后与允许登录的IP地址列表进行比对。如果客户端的IP地址不在列表中&#xff0c;就禁止登录。 “php $…
阅读更多...
快速创建第一个Spring Boot 项目

快速创建第一个Spring Boot 项目

一、介绍 Spring Boot 是一个开源的 Java 基础框架&#xff0c;它基于 Spring 框架&#xff0c;用于创建独立、生产级别的基于 Spring 的应用程序&#xff0c;你可以“跑起来”&#xff08;run&#xff09;你的 Spring 应用程序。Spring Boot 让基于 Spring 的应用开发变得更容…
阅读更多...
基于单片机的两轮直立平衡车的设计

基于单片机的两轮直立平衡车的设计

本设计基于单片机设计的两轮自平衡小车&#xff0c;其中机械部分包括车体、车轮、直流电机、锂电池等部件。控制电路板采用STC12C5A60S2作为主控制器&#xff0c;采用6轴姿态传感器MPU6050测量小车倾角&#xff0c;采用TB6612FNG芯片驱动电机。通过模块化编程完成了平衡车系统软…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023