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>

效果：

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

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

位图布隆过滤器

位图布隆过滤器

文章目录 位图&布隆过滤器1. 位图1.1位图概念1.2位图原理1.3位图实现1.4位图排序 2. 布隆过滤器2.1 引入布隆过滤器2.2 概念2.3 布隆过滤器插入2.4 布隆过滤器的查找2.5 布隆过滤器模拟实现2.6 布隆过滤器的删除2.7 布隆过滤器优缺点2.8 布隆过滤器使用场景 3. 海量数据问题…
阅读更多...
比特币 ZK 赏金系列：第 2 部分——查找哈希冲突

比特币 ZK 赏金系列：第 2 部分——查找哈希冲突

在我们的零知识赏金 (ZKB) 系列的第二部分中&#xff0c;我们将其应用于解决哈希冲突难题。在这样的谜题中&#xff0c;两个不同的输入散列到相同的输出。此类赏金可用于&#xff1a; 充当煤矿中的金丝雀&#xff0c;给我们一个有价值的提醒。存在冲突是散列函数较弱的标志&…
阅读更多...
合合信息、上海大学、华南理工大学发布业内首个古彝文编码“大字典” ，为古文字打造“身份证”

合合信息、上海大学、华南理工大学发布业内首个古彝文编码“大字典” ，为古文字打造“身份证”

“乌蒙山连着山外山&#xff0c;月光洒向了响水滩。”近期在各大短视频平台爆火的《奢香夫人》你听过吗&#xff1f;奢香夫人是一位彝族“巾帼英雄”&#xff0c;这首同名歌曲早在2009年便已发布&#xff0c;如今突然“翻红”&#xff0c;不仅体现了大众对于少数民族文化高涨的…
阅读更多...
Unity可视化Shader工具ASE介绍——1、ASE的介绍、安装和简单使用

Unity可视化Shader工具ASE介绍——1、ASE的介绍、安装和简单使用

大家好&#xff0c;我是阿赵&#xff0c;接下来我打算介绍一下Unity引擎的一个好用的可视化Shader编辑插件。这个插件叫做Amplify Shader Editor&#xff0c;下面都会简称为ASE。这一篇主要是讲一下这个插件的获取、安装&#xff0c;和一些简单的界面用法介绍。之后有机会&…
阅读更多...
C语言的stdio.h的介绍

C语言的stdio.h的介绍

C语言的stdio.h的介绍 C语言的stdio.h的介绍 C语言的stdio.h的介绍C语言stdio.h的介绍 C语言stdio.h的介绍 这个含义是导入标准输入输出库 包含头文件.h&#xff0c;std标准库&#xff0c;io是input output输入输出库 <>代表系统库&#xff0c;自定义的话用""…
阅读更多...
C++打印字符串数组中的元素(字符串)

C++打印字符串数组中的元素(字符串)

C遍历字符串数组&#xff0c;在main函数里定义一个字符串数组&#xff0c;要求依次输出字符串元素&#xff1a; string a[4] {"a", "vag", "gwe", "gewa"};希望打印的结果 上面可以看做是二维指针&#xff0c;第一维是每个字符串&a…
阅读更多...
Springboot 前后端分离项目使用 POI 生成并导出 Excel

Springboot 前后端分离项目使用 POI 生成并导出 Excel

在做一个 SpringBoot 前后端分离项目的时候&#xff0c;需要将数据存到 Excel中&#xff0c;用户可以下载 Excel。具体实现是采用 Apache 强大的 POI。文章最后将源码例出。 POI API 文档&#xff1a; https://poi.apache.org/apidocs/dev/index.html 步骤 导入 POI 的 maven …
阅读更多...
【C语言】指针的进阶（三）—— 模拟实现qsort函数以及指针和数组的笔试题解析

【C语言】指针的进阶（三）—— 模拟实现qsort函数以及指针和数组的笔试题解析

目录 1、模拟实现qsort函数 1.1、qsort函数的回顾 1.2、模拟实现qsort函数 2、指针和数组笔试题解析 2.1、一维数组 2.2、字符数组 1、模拟实现qsort函数 1.1、qsort函数的回顾 要模拟实现qsort函数&#xff0c;就要了解清楚qsort函数的参数以及使用方式。 我们先回顾一…
阅读更多...
vue3 - 封装倒计时函数 useCountDown

vue3 - 封装倒计时函数 useCountDown

编写一个函数 useCountDown 可以把秒数格式化为倒计时的显示状态。 步骤 1. 编写函数框架 ---> 确认参数和返回值&#xff08;显示格式化时间的数据开启倒计时的函数&#xff09; 2. 倒计时的核心逻辑&#xff1a;每隔1s减一 3. 格式化 1&#xff09;安装格式化工具&#xf…
阅读更多...
跨域问题的原理及解决方法

跨域问题的原理及解决方法

一.同源策略 如果没有进行特殊处理&#xff0c;我们在进行前后端联调的时候游览器会发生报错&#xff1a; 这是因为请求被同源策略被阻止&#xff0c;浏览器出于安全的考虑&#xff0c;使用XMLHttpRequest对象发起HTTP请求&#xff08;异步请求&#xff09;时必须遵守同源策略…
阅读更多...
单文件制作工具 v7.0.2.38(20230406) 最新版_一个小巧强大的PECMD/7zSFX单文件制作工具

单文件制作工具 v7.0.2.38(20230406) 最新版_一个小巧强大的PECMD/7zSFX单文件制作工具

网盘下载 功能描述 —全新的自解压内核&#xff0c;非现有的7zSFX、WinRAR、ZLIB自解压模块&#xff1b; —采用先进的打包方式&#xff08;堪称黑科技—>内核默认PECMD自解压模块&#xff09; —7zSFX模块&#xff0c;创建的单文件支持传递参数&#xff08;包含内置参数和外…
阅读更多...
1、MQ基础

1、MQ基础

微服务一旦拆分&#xff0c;必然涉及到服务之间的相互调用&#xff0c;目前我们服务之间调用采用的都是基于OpenFeign的调用。这种调用中&#xff0c;调用者发起请求后需要等待服务提供者执行业务返回结果后&#xff0c;才能继续执行后面的业务。也就是说调用者在调用过程中处于…
阅读更多...
信息安全：网络安全审计技术原理与应用.

信息安全：网络安全审计技术原理与应用.

信息安全&#xff1a;网络安全审计技术原理与应用. 网络安全审计是指对网络信息系统的安全相关活动信息进行获取、记录、存储、分析和利用的工作。网络安全审计的作用在千建立“事后“安全保障措施&#xff0c;保存网络安全事件及行为信息&#xff0c;为网络安全事件分析提供线…
阅读更多...
SQLite 3.43 发布，性能大提升！

SQLite 3.43 发布，性能大提升！

前言 SQLite是一种被广泛运用的嵌入式关系型数据库管理系统&#xff0c;最新发布的SQLite 3.43版本带来了一个重要的改进&#xff0c;大幅提升了对JSON数据的处理性能&#xff0c;达到了之前的两倍。 主要更新 添加对 Contentless-Delete FTS5 索引的支持。这是 FTS5 全文搜索…
阅读更多...
leetcode算法题-移动零Java

leetcode算法题-移动零Java

这道题的解法,我们可以新建一个等长的数组,初始化后数组中的元素都为零,我们只需要遍历一遍原来的数组,将不为0的数据转移到新数组即可,下面是代码实现: public static void main(String[] args) {System.out.println("移动零:" Arrays.toString(moveZero(new int[…
阅读更多...
【STM32】读写内部Flash初步使用

【STM32】读写内部Flash初步使用

基于stm32f103&#xff0c;作为个人学习记录使用 STM32 芯片内部有一个 FLASH 存储器&#xff0c;它主要用于存储代码,在紧急状态下常常会使用内部 FLASH 存储关键记录&#xff1b; 内部 FLASH 的构成 STM32 的内部 FLASH 包含主存储器、系统存储器以及选项字节区域 大容量…
阅读更多...
Unity下tga和png格式图片打包成AB包大小和加载速度测试

Unity下tga和png格式图片打包成AB包大小和加载速度测试

测试素材 测试素材&#xff0c;一张tga格式&#xff0c;一张png格式&#xff0c;他们的图像尺寸一样都是8K图。 两张图在AssetBundles里显示 Tga格式的图明显大很多&#xff0c;我们打包成ab包看看。 在PC 打包后看&#xff0c;明显大小一样&#xff0c;我们进行ab包加载&am…
阅读更多...
文心一言 VS 讯飞星火 VS chatgpt （101）-- 算法导论9.3 7题

文心一言 VS 讯飞星火 VS chatgpt （101）-- 算法导论9.3 7题

七、用go语言&#xff0c;设计一个 O(n)时间的算法&#xff0c;对于一个给定的包含n个互异元素的集合 S 和一个正整数k≤n&#xff0c;该算法能够确定 S 中最接近中位数的k个元素。 文心一言&#xff1a; 要设计一个 O(n) 时间的算法来找到集合 S 中最接近中位数的 k 个元素&…
阅读更多...
idea创建同级项目-纠结是SB

idea创建同级项目-纠结是SB

idea创建同级项目-纠结是SB 创建方法&#xff1a;
阅读更多...
从C语言到C++：C++入门知识（1）

从C语言到C++：C++入门知识（1）

朋友们、伙计们&#xff0c;我们又见面了&#xff0c;本期来给大家解读一下有关C语言的相关知识点&#xff0c;如果看完之后对你有一定的启发&#xff0c;那么请留下你的三连&#xff0c;祝大家心想事成&#xff01; C 语 言 专 栏&#xff1a;C语言&#xff1a;从入门到精通 数…
阅读更多...
最新文章

Copyright @ 2022~2023