当前位置: 首页 > news >正文

HTML5福利篇--使用Canvas画图

目录

一.Canvas元素

1.Canvas元素定义

2.使用JavaScript获取页面中的Canvas对象

二.绘制图形

1.绘制直线

2.绘制矩形

(1)rect()

(2)strokeRect()

(3)fillRect()和clearRect()函数

3.绘制圆弧

4.描边和填充

5.渐变颜色

  6.透明颜色

三.绘制图像和文字

1.绘制图像

2.组合图       

3.输出文字

4.图形操作


一.Canvas元素

        Canvas是画布的意思,这个是HTML5中新出现的元素,可以在页面中定义一个画布,实现绘图功能

1.Canvas元素定义

语法:

<canvas id="xxx" height= width= >当浏览器不支持Canvas时,显示这里的文字</canvas>

id                画布元素的标识

height        画布高

width        画布宽

例如定义一个画布:

<canvas id="canvas" width="600" height="960">浏览器不支持</canvas>
2.使用JavaScript获取页面中的Canvas对象

        在JavaScript中可以用document.getElementById()方法获取网页中的对象,获得对象后,通过getContext()函数获得对象的2d上下文对象,就可以在画布上进行绘画了

语法:

docment.getElementById(ObjectId)

例:

<body>
<canvas id="canvas" width="600" height="960">浏览器不支持</canvas>
<script>var c=document.getElementById("canvas"); //获得画布对象var d=c.getContext("2d");  //获得2d上下文对象
</script>
</body>
二.绘制图形
1.绘制直线

        beginPath()                开始绘图函数

        moveTo()                该函数将坐标移动到指定坐标,函数参数为x,y

        lineTo()             绘制直线

        stroke()                绘制图形的边界轮廓

例如绘制三角形:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style></style>
</head>
<body>
<canvas id="canvas" width="600" height="960">浏览器不支持</canvas>
<script>function f() {var c=document.getElementById("canvas"); //获得画布对象var d=c.getContext("2d");  //获得2d上下文对象d.beginPath();   //开始绘图d.moveTo(100,0)     //将直线移动到绘图起点坐标d.lineTo(50,100);d.lineTo(150,100);d.lineTo(100,0);d.closePath();      //闭合路径,如果线的起点和终点连接,可以忽略这个方法d.stroke();         //绘制轮廓}window.addEventListener("load",f,false);
</script>
</body>
</html>

效果:

又例如绘制复杂图案:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style></style>
</head>
<body>
<canvas id="canvas" width="600" height="960">浏览器不支持</canvas>
<script>function f() {var c=document.getElementById("canvas"); //获得画布对象var d=c.getContext("2d");  //获得2d上下文对象var dx=150;var dy=150;var s=100;d.beginPath();   //开始绘图var x=Math.sin(0);var y=Math.cos(0);var dig=Math.PI/15*11;for(var i=0;i<30;i++){var x=Math.sin(i*dig);var y=Math.cos(i*dig);d.lineTo(dx+x*s,dy+y*s);}d.closePath();      //闭合路径,如果线的起点和终点连接,可以忽略这个方法d.stroke();         //绘制轮廓}window.addEventListener("load",f,true);
</script>
</body>
</html>

效果:

2.绘制矩形

        可以通过rect()函数和strokeRect()函数绘制矩形,调用fillRect()填充指定矩形的区域,调用clearRect()可以擦除指定区域的矩形

(1)rect()

        该函数用来绘制矩形,语法:

Rect(x,y,width,height)

x,y        表示矩形的起点

width,height        表示矩形的长和宽

(2)strokeRect()

        该函数和rect()函数差不多,都是绘制矩形,但该函数绘图时不需要像rect()一样调用beginPath()和closePath(),语法:

storkeRect(x,y,width,height)
(3)fillRect()和clearRect()函数

        fillRect()绘制有填充的矩形,语法:

fillRect(x,y,width,height)

        clearRect()清除矩形,语法:

clearRect(x,y,width,height)

例如:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style></style>
</head>
<body>
<canvas id="canvas" width="600" height="960">浏览器不支持</canvas>
<script>function f() {var c=document.getElementById("canvas"); //获得画布对象var d=c.getContext("2d");  //获得2d上下文对象d.strokeRect(360,100,150,100)  //不需要调用beginPath和closePathd.beginPath();   //开始绘图d.rect(200,100,150,150);d.fillRect(200,260,150,150);  //代填充的矩形d.closePath();      //闭合路径,如果线的起点和终点连接,可以忽略这个方法d.stroke();         //绘制轮廓}window.addEventListener("load",f,true);
</script>
</body>
</html>

效果: 

3.绘制圆弧

        绘制圆弧函数arc(),语法:

arc(centerX,centerY,radius,startingAngle,endingAngle,antiClockwise);

参数:

centerX                圆弧圆心的X坐标

centerY                圆弧圆心的Y坐标

radius                圆弧的半径

startingAngle        圆弧的起始角度

endingAngela        圆弧的结束角度

antiClockwise        是否按逆时针绘图  

例如:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style></style>
</head>
<body>
<canvas id="canvas" width="600" height="960">浏览器不支持</canvas>
<script>function f() {var c=document.getElementById("canvas"); //获得画布对象var d=c.getContext("2d");  //获得2d上下文对象d.beginPath();   //开始绘图d.arc(150,150,100,1/3*Math.PI,2/3*Math.PI,true);// d.arc(150,450,100,0,2*Math.PI,true);d.closePath();      //闭合路径,如果线的起点和终点连接,可以忽略这个方法d.stroke();         //绘制轮廓}window.addEventListener("load",f,true);
</script>
</body>

效果:

4.描边和填充

        Canvas的2d上下文对象的strokeStyle属性可以设置描边的颜色,lineWidth属性可以指定描边的宽度,fillStyle属性可以设置填充的颜色

例如绘制一个红边的圆和黄色的矩形:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style></style>
</head>
<body>
<canvas id="canvas" width="600" height="960">浏览器不支持</canvas>
<script>function f() {var c=document.getElementById("canvas"); //获得画布对象var d=c.getContext("2d");  //获得2d上下文对象d.lineWidth=10;d.strokeStyle="red";d.fillStyle="yellow";d.arc(300,100,60,0,2*Math.PI,false)d.fillRect(250,200,100,100);d.closePath();      //闭合路径,如果线的起点和终点连接,可以忽略这个方法d.stroke();         //绘制轮廓}window.addEventListener("load",f,true);
</script>
</body>

效果:

5.渐变颜色

        CanvasGradient用于定义画布中一个渐变颜色的对象,使用渐变颜色前要创建对象,渐变颜色对象可以通过两种方式创建:

(1)以线性颜色渐变方式创建CanvasGradient对象,函数createLinearGradient()语法:

createLinearGradient(xStrat,yStrat,xEnd,yEnd)

其中的参数分别是线性开始的坐标和结束的坐标

(2)以放射颜色渐变方式创建CanvasGradient对象,函数createRadiaGradient()语法:

createRadiaGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)

参数:

xStart,yStart                开始圆的圆心坐标

radiusStart                开始圆的半径

xEnd,yEnd                结束圆的圆心坐标

radiusEnd                结束圆的半径

(3)为渐变对象设置颜色

        创建渐变颜色对象后,可以通过CanvasGradient属性的addColorStop()方法在渐变的某个点添加一个颜色变化,语法:

addColorStop(offset,color)

offset                一个范围在0到1之间的浮点值,表示渐变的开始和结束的一部分

color                表示offset到颜色

(4)设置描边样式为渐变颜色

        只要将前面创建的CanvasGradient对象赋值给Canvas的上下文2d对象就可以使用渐变颜色进行描边了

例如:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<canvas id="canvas" width="600" height="960">浏览器不支持</canvas>
<script>function f() {var c=document.getElementById("canvas"); //获得画布对象var d=c.getContext("2d");  //获得2d上下文对象var e=d.createRadialGradient(100,100,0,100,100,100);e.addColorStop(0,"red");e.addColorStop(0.5,"green");e.addColorStop(1,"yellow");var centerx=100;var centery=100;var radius=100;var startingAngle=0;var endingAngle=2*Math.PI;d.beginPath();d.arc(centerx,centery,radius,startingAngle,endingAngle,false);d.fillStyle=e;d.stroke(); //绘制轮廓d.fill();}window.addEventListener("load",f,true);
</script>
</body>

效果:

  6.透明颜色

        在指定颜色时可以使用rgba()方法定义颜色透明度,语法:

rgba(r,g,b,alpha)

参数: r表示红色集合,b表示绿色集合,b表示蓝色集合,它们都是十进制数,范围在0~255

alpha表示透明度,取值范围0~1

例如:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<canvas id="canvas" width="600" height="960">浏览器不支持</canvas>
<script>function f() {var canvas=document.getElementById("canvas"); //获得画布对象if(canvas == null) return false;var context=canvas.getContext("2d");// 绘制底图context.fillStyle="yellow";context.fillRect(0,0,400,350);// 循环绘制10个圆var n=0;for(var i=0;i<10;i++){context.beginPath();context.arc(i*25,i*25,i*10,0,2*Math.PI,true);context.fillStyle="rgba(255,0,0,0.5)";context.fill();  //填充图形}}window.addEventListener("load",f,true);
</script>
</body>

效果:

三.绘制图像和文字
1.绘制图像

        Canvas画布绘制图像的方法是drawImage(),语法:

drawImage(image,x,y)
drawImage(image,x,y,width,height)
drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth,destHeight)

image                要绘制的图像

x,y                要绘制图像的左上角

width,height                绘制图像的宽和高

sourceX,sourceY                图像将要被绘制的区域的左上角

sourceWidth,sourceHeight                被绘制的原图像区域

destX,destY                要绘制图像区域的左上角的画布坐标

destWidth,destHeight                图像区域在画布上要绘制的大小

例如:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style></style>
</head>
<body>
<canvas id="canvas" width="2000" height="1000">浏览器不支持</canvas>
<script>function f() {var c=document.getElementById("canvas"); //获得画布对象var ctx=c.getContext("2d");  //获得2d上下文对象var ImageObj=new Image();ImageObj.src="mn1.png";ImageObj.onload=function () {ctx.drawImage(ImageObj,0,0)  //原图大小ctx.drawImage(ImageObj,980,0,480,300) //原图一半显示//  从原图(500,0)处截取一个300x300的图像大小,在(980,350)处显示,显示大小为300x300ctx.drawImage(ImageObj,500,0,300,300,980,350,300,300);};}window.addEventListener("load",f,true);
</script>
</body>
</html>

效果:

2.组合图       

         如果画布上已经有图形了,再放一个时,我们就要考虑图片的组合问题,Canvas的2d上下文对象的gloalCompositeOperation属性可以来设置组合方式,该属性参数如下:

globalCompositeOperation属性参数
参数描述
source-over默认值,新图会覆盖在原图上
destination-over在原有内容之下显示图像
source-in新图仅仅出现与原内容重复的部分,其他区域变透明
destination-in

原有内容和新图不重复的部分会被保留

source-atop新图像中与原内容重复的部分会被绘制,并覆盖原有内容上
destination-atop原有内容和新图像重复部分会被保留,并会在原有内容之下绘制图形
source-in只有新图和原内容不重复的部分会被绘制出来
destination-in原有内容和新图不重复部分会被保留
lighter两图像中重复的部分作加色处理
darker两图像中重复的部分作减色处理
xor重复部分会变透明
copy只有新图像会被保留,其他都被清除

例如:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<canvas id="canvas" width="2000" height="1000">浏览器不支持</canvas>
<script>function draw(){var c=document.getElementById("canvas");var ctx=c.getContext("2d");ctx.fillStyle="blue";ctx.fillRect(0,0,100,100);ctx.fillStyle="red";ctx.globalCompositeOperation="source-over";var centerX=100;var centerY=100;var radius=50;var startingAngle=0;var endingAngle=2*Math.PI;ctx.beginPath();ctx.arc(centerX,centerY,radius,startingAngle,endingAngle,false);ctx.fill();}window.addEventListener("load",draw,true);
</script>
</body>
</html>

效果:

 source-over

destination-over

source-in

destination-in

source-out

destination-out

source-atop

 source-atop

lighter

xor

copy

3.输出文字

(1)输出

        使用strokeText()方法可以在画布的指定文字输出文字,语法:

stroketText(string text,float x,float y)

参数:        text        文字                x,y        文字输出位置

例如:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<canvas id="canvas" width="2000" height="1000">浏览器不支持</canvas>
<script>function draw(){var c=document.getElementById("canvas");var ctx=c.getContext("2d");ctx.strokeText("hello world-----hello time",200,200);}window.addEventListener("load",draw,true);
</script>
</body>
</html>

效果:

(2)设置字体

        通过Context.font属性设置字符串字体,格式:

Context.font=“字体大小 字体名称”

例:

  var c=document.getElementById("canvas");var ctx=c.getContext("2d");ctx.font="10pt 黑体";ctx.strokeText("你好世界!你好时光!",200,200);

(3)设置边框宽度和颜色

        stokeStyle设置文字的颜色

(4)填充文字内部

        使用strokeText方法输出的文字是中空的,只绘制了边框,如果要填充文字内部,可以使用fillText() 方法,语法:

fillText(string text,float x,float y)

        也可以使用fillstyle属性来设置填充颜色

ctx.fiilStyle="blue";

例如渐变填充颜色:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<canvas id="canvas" width="2000" height="1000">浏览器不支持</canvas>
<script>function draw(){var c=document.getElementById("canvas");var ctx=c.getContext("2d");var Colordiagonal=ctx.createLinearGradient(100,100,900,100);Colordiagonal.addColorStop(0,"yellow");Colordiagonal.addColorStop(0.5,"green");Colordiagonal.addColorStop(1,"red");ctx.fillStyle=Colordiagonal;ctx.font="60pt 隶书";ctx.fillText("你好世界!你好时光!",100,100);}window.addEventListener("load",draw,true);
</script>
</body>
</html>

效果:

4.图形操作

        (1)保持和恢复绘图状态

调用Context.save()方法可以保持当前的绘图状态,绘图状态是以堆的方式保存,调用Context.restoe()方法弹出之前保存的绘制状态,这两个方法没有参数

例如:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<canvas id="canvas" width="2000" height="1000">浏览器不支持</canvas>
<script>function draw(){var c=document.getElementById("canvas");var ctx=c.getContext("2d");ctx.fillStyle='red';ctx.fillRect(0,0,150,150);  //红色矩形ctx.save();   //保存绘图状态ctx.fillStyle="blue";ctx.fillRect(0,200,150,150);  //蓝色的矩形ctx.restore();   //恢复之前保存的绘图状态,即红色ctx.fillRect(200,200,150,150)}window.addEventListener("load",draw,true);
</script>
</body>
</html>

效果:

(2)图形变换

        a.平移translate(x,y)

                参数x和y表示从原点分别平移的位移

        b.缩放scale(x,y)

                参数x和y表示坐标轴缩放比例

        c.旋转rotate(angle)

                参数angle是坐标轴旋转的角度

        d.变形setTransform()        

                语法:

setTransform(m1,m2,m3,m4,dx,dy)

表示点(x,y)变换到点(X,Y),变换过程:

X=m1*x+m3*y+dx,Y=m2*x+m4*y+dy

例如:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<canvas id="canvas" width="2000" height="1000">浏览器不支持</canvas>
<script>function draw(){var c=document.getElementById("canvas");var context=c.getContext("2d");context.save();context.fillStyle="#EEEEFF";context.fillRect(0,0,400,300);context.fillStyle="rgba(255,0,0,0.1)";context.fillRect(0,0,100,100);context.translate(100,100);context.scale(0.5,0.5);context.rotate(Math.PI/4);context.fillRect(0,0,100,100);context.restore();context.beginPath();context.arc(200,50,50,0,2*Math.PI,false);context.stroke();context.fill();}window.addEventListener("load",draw,true);
</script>
</body>
</html>

效果:

相关文章:

HTML5福利篇--使用Canvas画图

目录 一.Canvas元素 1.Canvas元素定义 2.使用JavaScript获取页面中的Canvas对象 二.绘制图形 1.绘制直线 2.绘制矩形 &#xff08;1&#xff09;rect() &#xff08;2&#xff09;strokeRect() &#xff08;3&#xff09;fillRect()和clearRect()函数 3.绘制圆弧 4.…...

基于Matlab实现图像目标边界描述

图像目标边界描述是图像处理中的一个重要问题。边界描述可以用于目标检测和识别、图像分割等应用。Matlab提供了强大的图像处理工具箱&#xff0c;可以方便地实现图像目标边界描述。本文介绍一种基于边缘检测的图像目标边界描述方法&#xff0c;并提供一个简单的案例源码。 文章…...

汽车电子——产品标准规范汇总和梳理(自动驾驶)

文章目录 前言 一、分级 二、定位 三、地图 四、座舱 五、远程 六、信息数据 七、场景 八、智慧城市 九、方法论 总结 前言 见《汽车电子——产品标准规范汇总和梳理》 一、分级 《GB/T 40429-2021 汽车驾驶自动化分级》 《QC/T XXXXX—XXXX 智能网联汽车 自动驾…...

redis部署与管理

目录 一、关系数据库与非关系型数据库&#xff1a; 1. 关系型数据库&#xff1a; 2.非关系型数据库&#xff1a; 二、关系型数据库和非关系型数据库区别&#xff1a; &#xff08;1&#xff09;数据存储方式不同&#xff1a; &#xff08;2&#xff09;扩展方式不同&#xf…...

MySQL 事件

文章目录 1.简介2.事件调度器3.创建事件4.查看事件5.修改事件6.删除事件参考文献 1.简介 MySQL 事件&#xff08;Event&#xff09;事件是根据时间表运行的任务&#xff0c;类似于 Unix crontab 和 Windows 定时任务。 一个事件可调用一次&#xff0c;也可周期性地启动。它由…...

软件项目费用计算方法

计算软件项目的费用是项目管理的关键组成部分之一。费用计算方法可以帮助您确定项目的总成本&#xff0c;包括开发、测试、维护和其他相关费用。以下是一些常见的软件项目费用计算方法&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发…...

暗月中秋靶场活动writeup

前言 暗月在中秋节搞了个靶场活动&#xff0c;一共有4个flag&#xff0c;本着增长经验的想法参加了本次活动&#xff0c;最终在活动结束的时候拿到了3个flag&#xff0c;后面看了其他人的wp也复现拿到第四个flag。过程比较曲折&#xff0c;所以记录一下。 靶场地址 103.108.…...

【挑战开发100个项目 | 1. C语言学生管理系统】

本项目是一个简易的学生信息管理系统&#xff0c;用户可以通过命令行界面完成学生信息的增加、删除、修改、查询、排序和列表展示等功能。数据以txt文件形式存储&#xff0c;实现了数据持久化。项目采用模块化设计&#xff0c;具有较好的可读性和扩展性。适用于初学者学习c语言…...

内存利用:迟来的blindless与逃不掉的exit漏洞

0x01 前言 在计算机安全领域&#xff0c;漏洞的危险性往往与其广泛性和潜在攻击方式密切相关。今天&#xff0c;我们将深入探讨一个异常危险的漏洞&#xff0c;它存在于程序退出时执行的常见函数"exit"中。无论是在操作系统还是应用程序中&#xff0c;"exit&qu…...

Vue - 虚拟DOM的简单理解

目录 虚拟DOM虚拟DOM树生成流程 因为直接操作真实的 DOM 会比较影响效率。所以 vue 使用了 虚拟DOM&#xff08;VNode&#xff09;来描述要渲染的内容。 虚拟DOM 它是一个 js 对象&#xff0c;比如&#xff1a; const vnode {tag: "h1",children: [{ tag: undefi…...

TongWeb8下应用忙碌线程监控

问题 &#xff1a; 在系统运行过程中发现TongWeb进程占用CPU过高&#xff0c;需要分析是应用哪里引起的问题。 分析过程(仅限Linux环境)&#xff1a; 1. 通过top命令查看TongWeb的java进程占用的CPU情况。 查看误区&#xff1a;不要以为java进程CPU占到398%就是高&#xff0…...

Docker部署ActiveMQ消息中间件

1、准备工作 docker pull webcenter/activemq:5.14.3 Pwd"/data/software/activemq" mkdir ${Pwd}/data -p2、运行容器 docker run -d --name activemq \-p 61616:61616 \-p 8161:8161 \-v ${Pwd}/data:/opt/activemq/data \-v /etc/localtime:/etc/localtime \--r…...

Python并发执行(未完待续)

python的多进程执行 多进程实现方式一 from multiprocessing import Processdef func1(name):print("测试 %s 多进程" %name)if __name__ "__main__":process_list []for i in range(5):p Process(target func1, args (Python, ))p.start()process_…...

4.一元多项式相乘

题目说明&#xff1a; 要求采用链表形式&#xff0c;求两个一元多项式的乘积&#xff1a;h3 h1*h2。函数原型为&#xff1a;void multiplication( NODE * h1, NODE * h2, NODE * h3 )。 输入&#xff1a; 输入数据为两行&#xff0c;分别表示两个一元多项式。每个一元多项式以…...

Android Gilde获取网络图片显示保存路径并转化为bitmap

为某个按钮或者图片添加点击事件&#xff0c;然后&#xff1a;strImg为图片url地址 &#xff0c;loadDialog只是个提示信息,可以不要这个参数。使用Glide的onResourceReady方法获取到bitmap对象&#xff1a; LoadDialog loadDialognew LoadDialog(); loadDialog.initShow(cont…...

Uts阿里百川旗舰版插件UniApp-X

简介&#xff1a; 此插件为Uts插件&#xff0c;1.0版暂只支持安卓 插件地址&#xff1a;https://ext.dcloud.net.cn/plugin?id14771 接入阿里百川安卓旗舰版最新版5.0.1.9&#xff01;支持淘宝授权登录&#xff0c;获取登录用户信息&#xff0c;拉起淘宝&#xff0c;打开商…...

一创聚宽的实盘就要关闭了,有没有好用的实盘平台推荐

挺多的&#xff0c;比较普遍的是QMT和Ptrade&#xff0c;python语言&#xff0c;易上手&#xff0c;通用性好&#xff0c;要说适用性可以考虑Ptrade&#xff0c;问一下你的客户经理有没有&#xff0c;用Ptrade的券商也多&#xff0c;如果之前用一创聚宽你可以无缝切换&#xff…...

全套办公软件Office 2019 mac专业版功能

Microsoft office 2019 Beta for Mac 是一款办公软件套装&#xff0c;它包含常用的办公应用程序&#xff0c;如 Word、Excel、PowerPoint 和 Outlook 等。office 2019 Beta 版本是一个测试版本&#xff0c;旨在让用户提前体验下一个版本的 office 套件&#xff0c;以便用户可以…...

【计算机网络】IP协议

目录 前言 IP协议 基本概念 IP协议格式 分片 16位标识 3位标志与13位片偏移 分片流程 网段划分 网络号和主机号 DHCP协议 CIDR划分方案 特殊的ip地址 ip地址数量限制 私有ip地址与公网ip地址 路由转发 前言 我们前面讲了HTTP/HTTPS协议和TCP/…...

【操作系统笔记九】并发安全问题

用户态抢占和内核态抢占 内核中可以执行以下几种程序&#xff1a; ① 当前运行的进程&#xff1a;陷阱程序&#xff08;系统调用&#xff09; 和 故障程序&#xff08;page fault&#xff09; &#xff0c;进程运行在内核态的时候&#xff0c;其实就是在执行进程在用户态触发的…...

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

Linux离线(zip方式)安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

AirSim/Cosys-AirSim 游戏开发(四)外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...

从 GreenPlum 到镜舟数据库:杭银消费金融湖仓一体转型实践

作者&#xff1a;吴岐诗&#xff0c;杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言&#xff1a;融合数据湖与数仓的创新之路 在数字金融时代&#xff0c;数据已成为金融机构的核心竞争力。杭银消费金…...

解决:Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象&#xff1a; android studio报错&#xff1a; [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决&#xff1a; 不要动CMakeLists.…...