Canvas绘制图片和区域（前端使用Canvas绘制图片，并在图片上绘制区域）

news2024/9/29 1:26:08

简介：在Web开发中，有时候我们需要在图片上进行一些交互式操作，比如绘制区域、标记等。这种场景下，我们可以使用HTML5的<canvas>元素来实现。Canvas 是 HTML5 提供的一种图形绘制接口，可以通过 JavaScript 在网页上绘制图形、动画和其他视觉效果。这里来记录一下，如何在一张图片上，绘制区域

先看一下效果：

如何使用Canvas在图片上绘制区域？

初始化Canvas

一. 首先，我们需要初始化三个canvas画布

initCanvas() {
  // 初始化canvas画布
  let canvasWrap = document.getElementsByClassName("canvas-wrap");
  this.wrapWidth = canvasWrap[0].clientWidth;
  this.wrapHeight = canvasWrap[0].clientHeight;

  this.imgCanvas = document.getElementById("imgCanvas");
  this.imgCtx = this.imgCanvas.getContext("2d");

  // 绘制canvas
  this.drawCanvas = document.getElementById("drawCanvas");
  this.drawCtx = this.drawCanvas.getContext("2d");

  // 保存绘制区域 saveCanvas
  this.saveCanvas = document.getElementById("saveCanvas");
  this.saveCtx = this.saveCanvas.getContext("2d");
}
  1. imgCanvas用于绘制原始图片
  2. drawCanvas用于临时绘制区域
  3. saveCanvas用于保存最终绘制的区域

二. 计算并设置canvas的宽高比例，以适应图片尺寸

initImgCanvas() {
  // 计算宽高比
  let ww = this.wrapWidth; // 画布宽度
  let wh = this.wrapHeight; // 画布高度 
  let iw = this.imgWidth; // 图片宽度
  let ih = this.imgHeight; // 图片高度

  if (iw / ih < ww / wh) {
    // 以高为主
    this.ratio = ih / wh;
    this.canvasHeight = wh;
    this.canvasWidth = (wh * iw) / ih;
  } else {
    // 以宽为主 
    this.ratio = iw / ww;
    this.canvasWidth = ww;
    this.canvasHeight = (ww * ih) / iw;
  }

  // 初始化画布大小
  this.imgCanvas.width = this.canvasWidth;
  this.imgCanvas.height = this.canvasHeight;
  this.drawCanvas.width = this.canvasWidth; 
  this.drawCanvas.height = this.canvasHeight;
  this.saveCanvas.width = this.canvasWidth;
  this.saveCanvas.height = this.canvasHeight;

  // 图片加载绘制
  let img = document.createElement("img");
  img.src = this.imgUrl;
  img.onload = () => {
    console.log("图片已加载");
    this.imgCtx.drawImage(img, 0, 0, this.canvasWidth, this.canvasHeight);
    this.renderDatas(); // 渲染原有数据
  };
}

这里先计算画布和图片的宽高比,根据比例关系决定以宽为主还是以高为主进行等比缩放。然后设置三个canvas的宽高,并在图片加载完成后将其绘制到imgCanvas上。renderDatas函数用于渲染已有的绘制数据(如果有的话)。

开始绘制

三. 绘制的主要逻辑

startDraw() {
  // 绘制区域
  if (this.isDrawing) return;
  this.isDrawing = true;
  // 绘制逻辑
  this.drawCanvas.addEventListener("click", this.drawImageClickFn);
  this.drawCanvas.addEventListener("dblclick", this.drawImageDblClickFn);
  this.drawCanvas.addEventListener("mousemove", this.drawImageMoveFn);
}

我们在drawCanvas上监听click、dblclick和mousemove事件,分别对应点击、双击和鼠标移动三种绘制交互。

四. 点击事件用于开始一个新的区域绘制

drawImageClickFn(e) {
  let drawCtx = this.drawCtx;
  if (e.offsetX || e.layerX) {
    let pointX = e.offsetX == undefined ? e.layerX : e.offsetX;
    let pointY = e.offsetY == undefined ? e.layerY : e.offsetY;
    let lastPoint = this.drawingPoints[this.drawingPoints.length - 1] || [];
    if (lastPoint[0] !== pointX || lastPoint[1] !== pointY) {
      this.drawingPoints.push([pointX, pointY]);
    }
  }
}

这里获取鼠标点击的坐标,并将其推入drawingPoints数组中,用于临时保存当前绘制区域的点坐标。

五. 鼠标移动事件用于实时绘制区域

drawImageMoveFn(e) {
  let drawCtx = this.drawCtx;
  if (e.offsetX || e.layerX) {
    let pointX = e.offsetX == undefined ? e.layerX : e.offsetX;
    let pointY = e.offsetY == undefined ? e.layerY : e.offsetY;
    // 绘制
    drawCtx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);

    // 绘制点
    drawCtx.fillStyle = "blue";
    this.drawingPoints.forEach((item, i) => {
      drawCtx.beginPath();
      drawCtx.arc(...item, 6, 0, 180);
      drawCtx.fill(); //填充
    });

    // 绘制动态区域
    drawCtx.save();
    drawCtx.beginPath();
    this.drawingPoints.forEach((item, i) => {
      drawCtx.lineTo(...item);
    });
    drawCtx.lineTo(pointX, pointY);
    drawCtx.lineWidth = "3";
    drawCtx.strokeStyle = "blue";
    drawCtx.fillStyle = "rgba(255, 0, 0, 0.3)";
    drawCtx.stroke();
    drawCtx.fill(); //填充
    drawCtx.restore();
  }
}

这里先清空drawCanvas,然后遍历drawingPoints数组,绘制已经点击的点。接着再绘制一个动态区域,即从第一个点开始,连线到当前鼠标位置,形成一个闭合多边形区域。

六. 双击事件用于完成当前区域的绘制

drawImageDblClickFn(e) {
  let drawCtx = this.drawCtx;
  let saveCtx = this.saveCtx;
  if (e.offsetX || e.layerX) {
    let pointX = e.offsetX == undefined ? e.layerX : e.offsetX;
    let pointY = e.offsetY == undefined ? e.layerY : e.offsetY;
    let lastPoint = this.drawingPoints[this.drawingPoints.length - 1] || [];
    if (lastPoint[0] !== pointX || lastPoint[1] !== pointY) {
      this.drawingPoints.push([pointX, pointY]);
    }
  }
  // 清空绘制图层
  drawCtx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
  // 绘制区域至保存图层
  this.drawSaveArea(this.drawingPoints);

  this.drawedPoints.push(this.drawingPoints);
  this.drawingPoints = [];
  this.isDrawing = false;

  // 绘制结束逻辑
  this.drawCanvas.removeEventListener("click", this.drawImageClickFn);
  this.drawCanvas.removeEventListener("dblclick", this.drawImageDblClickFn);
  this.drawCanvas.removeEventListener("mousemove", this.drawImageMoveFn);
}

双击时,先获取双击的坐标点,并将其推入drawingPoints数组中。然后清空drawCanvas,并调用drawSaveArea方法,将当前绘制区域渲染到saveCanvas上。

七. 遍历区域点坐标的方法

drawSaveArea(points) {
  if (points.length === 0) return;
  this.saveCtx.save();
  this.saveCtx.beginPath();
  points.forEach((item, i) => {
    this.saveCtx.lineTo(...item);
  });
  this.saveCtx.closePath();
  this.saveCtx.lineWidth = "2";
  this.saveCtx.fillStyle = "rgba(255,0, 255, 0.3)";
  this.saveCtx.strokeStyle = "red";
  this.saveCtx.stroke();
  this.saveCtx.fill(); 
  this.saveCtx.restore();
}

drawSaveArea方法会遍历当前区域的所有点坐标,并在saveCanvas上绘制一个闭合的多边形区域,边框为红色,填充为半透明的紫色。接下来,将当前绘制区域的点坐标数组drawingPoints推入drawedPoints数组中,用于保存所有已绘制的区域数据。然后,重置drawingPoints和isDrawing的状态,并移除所有绘制事件的监听器。

至此,一个区域的绘制就完成了。如果需要继续绘制新的区域,只需再次调用startDraw方法即可。

保存和渲染数据

八. 保存数据：我们需要将绘制的区域数据保存下来，以及从已有数据中渲染出区域

savePoints() {
  // 将画布坐标数据转换成提交数据
  let objectPoints = [];
  objectPoints = this.drawedPoints.map((area) => {
    let polygon = {};
    area.forEach((point, i) => {
      polygon[`x${i + 1}`] = Math.round(point[0] * this.ratio);
      polygon[`y${i + 1}`] = Math.round(point[1] * this.ratio);
    });
    return {
      polygon: polygon,
    };
  });
  this.submitData = objectPoints;
  console.log("最终提交数据", objectPoints);
}

这里遍历所有已绘制的区域drawedPoints,将每个区域的点坐标根据ratio进行缩放(实际图片尺寸),并转换成一个polygon对象的形式,最终保存在submitData中。

九. 渲染数据

renderDatas() {
  // 将提交数据数据转换成画布坐标
  this.drawedPoints = this.submitData.map((item) => {
    let polygon = item.polygon;
    let points = [];
    for (let i = 1; i < Object.keys(polygon).length / 2 + 1; i++) {
      if (!isNaN(polygon[`x${i}`]) && !isNaN(polygon[`y${i}`])) {
        points.push([
          polygon[`x${i}`] / this.ratio,
          polygon[`y${i}`] / this.ratio,
        ]);
      }
    }
    this.drawSaveArea(points);
    return points;
  });
}

渲染数据的逻辑是，遍历submitData中的每个polygon对象，根据ratio将其坐标值转换成canvas的坐标值，并调用drawSaveArea方法将其渲染到saveCanvas上。至此，我们就完成了在canvas上绘制图片区域的全部逻辑。可以根据具体需求进行相应的调整和扩展。

十. 执行过程

具体全部的执行顺序如下:

  1. 初始化Canvas
    • 调用initCanvas()方法初始化三个Canvas画布
    • 调用initImgCanvas()方法计算并设置画布宽高比例，加载并绘制图片
  2. 开始绘制
    • 调用startDraw()方法
    • 监听drawCanvas的click、dblclick、mousemove事件
    • 点击时,在drawImageClickFn中记录点坐标
    • 移动时,在drawImageMoveFn中实时绘制区域
    • 双击时,在drawImageDblClickFn中完成当前区域绘制，保存至saveCanvas
  3. 保存和渲染数据
    • 调用savePoints()方法,将绘制区域的点坐标数据转换并保存到submitData中
    • 调用renderDatas()方法,将submitData中的数据转换并渲染到saveCanvas上

简单来说，就是先初始化画布，然后开始绘制区域的交互，最后保存和渲染数据。

十一. 当然，如果想使用原生JS实现，可以改成像下面这样

let canvasWrap, wrapWidth, wrapHeight, imgCanvas, imgCtx, drawCanvas, drawCtx, saveCanvas, saveCtx;
let ratio, canvasWidth, canvasHeight, imgWidth, imgHeight, imgUrl;
let isDrawing = false;
let drawingPoints = [];
let drawedPoints = [];
let submitData = [];

// 1. 初始化Canvas画布
function initCanvas() {
  // 获取canvas容器元素并设置宽高
  canvasWrap = document.getElementsByClassName("canvas-wrap")[0];
  wrapWidth = canvasWrap.clientWidth;
  wrapHeight = canvasWrap.clientHeight;

  // 获取canvas元素并获取2D绘图上下文
  imgCanvas = document.getElementById("imgCanvas");
  imgCtx = imgCanvas.getContext("2d");
  drawCanvas = document.getElementById("drawCanvas");
  drawCtx = drawCanvas.getContext("2d");
  saveCanvas = document.getElementById("saveCanvas");
  saveCtx = saveCanvas.getContext("2d");
}

// 2. 初始化图片Canvas
function initImgCanvas() {
  // 计算画布和图片的宽高比
  let ww = wrapWidth;
  let wh = wrapHeight;
  let iw = imgWidth;
  let ih = imgHeight;

  if (iw / ih < ww / wh) {
    ratio = ih / wh;
    canvasHeight = wh;
    canvasWidth = (wh * iw) / ih;
  } else {
    ratio = iw / ww;
    canvasWidth = ww;
    canvasHeight = (ww * ih) / iw;
  }

  // 设置三个canvas的宽高
  imgCanvas.width = canvasWidth;
  imgCanvas.height = canvasHeight;
  drawCanvas.width = canvasWidth;
  drawCanvas.height = canvasHeight;
  saveCanvas.width = canvasWidth;
  saveCanvas.height = canvasHeight;

  // 加载图片并绘制到imgCanvas上
  let img = document.createElement("img");
  img.src = imgUrl;
  img.onload = () => {
    console.log("图片已加载");
    imgCtx.drawImage(img, 0, 0, canvasWidth, canvasHeight);
    renderDatas(); // 渲染已有数据
  };
}

// 3. 开始绘制
function startDraw() {
  if (isDrawing) return;
  isDrawing = true;
  // 监听drawCanvas的click、dblclick和mousemove事件
  drawCanvas.addEventListener("click", drawImageClickFn);
  drawCanvas.addEventListener("dblclick", drawImageDblClickFn);
  drawCanvas.addEventListener("mousemove", drawImageMoveFn);
}

// 4. 清空所有绘制区域
function clearAll() {
  saveCtx.clearRect(0, 0, canvasWidth, canvasHeight);
  drawedPoints = [];
}

// 5. 获取并加载图片
function getImage() {
  imgUrl = "需要渲染的图片地址";
  imgWidth = 200;
  imgHeight = 300;
  imgUrl && initImgCanvas();
}

// 6. 点击事件,记录点坐标
function drawImageClickFn(e) {
  if (e.offsetX || e.layerX) {
    let pointX = e.offsetX == undefined ? e.layerX : e.offsetX;
    let pointY = e.offsetY == undefined ? e.layerY : e.offsetY;
    let lastPoint = drawingPoints[drawingPoints.length - 1] || [];
    if (lastPoint[0] !== pointX || lastPoint[1] !== pointY) {
      drawingPoints.push([pointX, pointY]);
    }
  }
}

// 7. 鼠标移动事件,实时绘制区域
function drawImageMoveFn(e) {
  if (e.offsetX || e.layerX) {
    let pointX = e.offsetX == undefined ? e.layerX : e.offsetX;
    let pointY = e.offsetY == undefined ? e.layerY : e.offsetY;
    drawCtx.clearRect(0, 0, canvasWidth, canvasHeight);

    drawCtx.fillStyle = "blue";
    drawingPoints.forEach((item, i) => {
      drawCtx.beginPath();
      drawCtx.arc(...item, 6, 0, 180);
      drawCtx.fill();
    });

    drawCtx.save();
    drawCtx.beginPath();
    drawingPoints.forEach((item, i) => {
      drawCtx.lineTo(...item);
    });
    drawCtx.lineTo(pointX, pointY);
    drawCtx.lineWidth = "3";
    drawCtx.strokeStyle = "blue";
    drawCtx.fillStyle = "rgba(255, 0, 0, 0.3)";
    drawCtx.stroke();
    drawCtx.fill();
    drawCtx.restore();
  }
}

// 8. 双击事件,完成当前区域绘制
function drawImageDblClickFn(e) {
  if (e.offsetX || e.layerX) {
    let pointX = e.offsetX == undefined ? e.layerX : e.offsetX;
    let pointY = e.offsetY == undefined ? e.layerY : e.offsetY;
    let lastPoint = drawingPoints[drawingPoints.length - 1] || [];
    if (lastPoint[0] !== pointX || lastPoint[1] !== pointY) {
      drawingPoints.push([pointX, pointY]);
    }
  }
  drawCtx.clearRect(0, 0, canvasWidth, canvasHeight);
  drawSaveArea(drawingPoints);

  drawedPoints.push(drawingPoints);
  drawingPoints = [];
  isDrawing = false;

  drawCanvas.removeEventListener("click", drawImageClickFn);
  drawCanvas.removeEventListener("dblclick", drawImageDblClickFn);
  drawCanvas.removeEventListener("mousemove", drawImageMoveFn);
}

// 9. 绘制区域到saveCanvas
function drawSaveArea(points) {
  if (points.length === 0) return;
  saveCtx.save();
  saveCtx.beginPath();
  points.forEach((item, i) => {
    saveCtx.lineTo(...item);
  });
  saveCtx.closePath();
  saveCtx.lineWidth = "2";
  saveCtx.fillStyle = "rgba(255,0, 255, 0.3)";
  saveCtx.strokeStyle = "red";
  saveCtx.stroke();
  saveCtx.fill();
  saveCtx.restore();
}

// 10. 保存绘制数据
function savePoints() {
  let objectPoints = [];
  objectPoints = drawedPoints.map((area) => {
    let polygon = {};
    area.forEach((point, i) => {
      polygon[`x${i + 1}`] = Math.round(point[0] * ratio);
      polygon[`y${i + 1}`] = Math.round(point[1] * ratio);
    });
    return {
      polygon: polygon,
    };
  });
  submitData = objectPoints;
  console.log("最终提交数据", objectPoints);
}

// 11. 渲染已有数据
function renderDatas() {
  drawedPoints = submitData.map((item) => {
    let polygon = item.polygon;
    let points = [];
    for (let i = 1; i < Object.keys(polygon).length / 2 + 1; i++) {
      if (!isNaN(polygon[`x${i}`]) && !isNaN(polygon[`y${i}`])) {
        points.push([
          polygon[`x${i}`] / ratio, // 根据ratio换算canvas坐标
          polygon[`y${i}`] / ratio,
        ]);
      }
    }
    drawSaveArea(points); // 调用drawSaveArea将区域绘制到saveCanvas上
    return points;
  });
}

// 使用方式
initCanvas(); // 1. 初始化Canvas画布
getImage(); // 5. 获取并加载图片 
startDraw(); // 3. 开始绘制

renderDatas函数的作用是将已有的绘制数据(submitData)转换成canvas坐标，

并调用drawSaveArea方法将其渲染到saveCanvas上。

该函数遍历submitData中的每个polygon对象，

根据ratio将其坐标值转换成canvas的坐标值，

然后调用drawSaveArea方法绘制该区域。

最终返回一个包含所有区域点坐标的数组drawedPoints。

最后，需要按顺序调用initCanvas() -> getImage() -> startDraw()等方法,分别完成初始化画布、加载图片和开始绘制的功能。

十二. 全部代码

全部的vuejs代码和原生js代码直接点我头像，私我，获取全部代码。
 

创作不易，感觉有用，就一键三连，感谢(●'◡'●)

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

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

相关文章

AI应用案例：供应链平台健康状况和发展趋势分析

AI应用案例：供应链平台健康状况和发展趋势分析

某供应链平台在2019年就遍布了中国320个城市&#xff0c;为2600多家企业提供超40万个品类的供应链服务。它是通过直供城市终端销售门店&#xff0c;甚至是消费者&#xff0c;最大限度保证品牌和终端的销售利益。 但是平台交易市值较大、涉及的行业较多&#xff0c;而且打破了传…
阅读更多...
linux grep命令搜索指定路径

linux grep命令搜索指定路径

在Linux开发的过程中grep这个搜索命令&#xff0c;是必不可少的存在。它可以快速的搜索出来我们需要的关键字所在的位置。 有助于我们快速分析定位问题。 下面&#xff0c;分享一个简单实用的小技巧。 原始grep 最终grep grep过滤掉二进制的文件 -I选项 结论 这样子是不…
阅读更多...
队列的实现（使用C语言）

队列的实现（使用C语言）

完整代码链接&#xff1a;DataStructure: 基本数据结构的实现。 (gitee.com) 目录 一、队列的概念&#xff1a; 二、队列的实现&#xff1a; 使用链表实现队列&#xff1a; 1.结构体设计&#xff1a; 2.初始化&#xff1a; 3.销毁&#xff1a; 4.入队&#xff1a; 5.…
阅读更多...
深入了解 Flask Request

深入了解 Flask Request

文章目录 获取请求数据获取请求信息文件上传总结 Flask 是一个轻量级的 Python Web 框架&#xff0c;其简洁的设计和灵活的扩展性使其成为了许多开发者的首选。在 Flask 中&#xff0c;处理 HTTP 请求是至关重要的&#xff0c;而 Flask 提供了丰富而强大的 request 对象来处理…
阅读更多...
【Linux网络编程】I/O多路转接之select

【Linux网络编程】I/O多路转接之select

select 1.初识select2.了解select基本概念和接口介绍3.select服务器4.select特点及优缺点总结 点赞&#x1f44d;&#x1f44d;收藏&#x1f31f;&#x1f31f;关注&#x1f496;&#x1f496; 你的支持是对我最大的鼓励&#xff0c;我们一起努力吧!&#x1f603;&#x1f603;…
阅读更多...
企业微信主体能不能修改?

企业微信主体能不能修改?

企业微信变更主体有什么作用&#xff1f;当我们的企业因为各种原因需要注销或已经注销&#xff0c;或者运营变更等情况&#xff0c;企业微信无法继续使用原主体继续使用时&#xff0c;可以申请企业主体变更&#xff0c;变更为新的主体。企业微信变更主体的条件有哪些&#xff1…
阅读更多...
ansible——INVENTORY主机清单

ansible——INVENTORY主机清单

一、Inventory主机清单 Inventory支持对主机进行分组&#xff0c;每个组内可以定义多个主机&#xff0c;每个主机都可以定义在任何一个或多个主机组内 二、Inventory主机清单部署 2.1 前期准备 systemctl stop firewalld setenforce 0 yum install epel-release -y yum install…
阅读更多...
Panasonic机器人维修｜松下机械手维修过程

Panasonic机器人维修｜松下机械手维修过程

在我们的科技日新月异的今天&#xff0c;松下机器人已经广泛应用于各个领域&#xff0c;发挥着越来越重要的作用。然而&#xff0c;这些Panasonic机械手维修过程也是一项重要且复杂的工作。 一、准备工作 在进行松下机器人维修前&#xff0c;需要充分了解机器人的构造和工作原理…
阅读更多...
JavaScript逆向技术

JavaScript逆向技术

JavaScript逆向之旅&#xff1a;深入解析与实践 在数字时代&#xff0c;前端技术的迅速发展使得Web应用变得更加丰富和复杂。JavaScript&#xff0c;作为前端的核心语言&#xff0c;其安全性和隐私保护问题也逐渐浮出水面。JavaScript逆向&#xff0c;作为一种从前端代码中提取…
阅读更多...
2022 年全国职业院校技能大赛高职组云计算赛项试卷（容器云）

2022 年全国职业院校技能大赛高职组云计算赛项试卷（容器云）

#需要资源&#xff08;软件包及镜像&#xff09;或有问题的&#xff0c;可私聊博主&#xff01;&#xff01;&#xff01; #需要资源&#xff08;软件包及镜像&#xff09;或有问题的&#xff0c;可私聊博主&#xff01;&#xff01;&#xff01; #需要资源&#xff08;软件包…
阅读更多...
高效工作之软件系统——数据结构登记表

高效工作之软件系统——数据结构登记表

数据结构模板 开发完软件系统后&#xff0c;往往需要进行一些登记——《软件系统数据结构登记表》 然后软件项目有60个表左右&#xff0c;难道需要手动录入&#xff0c;那肯定不可能 工欲善其事必先利其器&#xff01;go。。。同事给的模板是下图 效果图 于是想到 之前使用…
阅读更多...
C++学习第三十一课：C++ 线程与多线程编程的应用

C++学习第三十一课：C++ 线程与多线程编程的应用

一、线程与多线程编程的基本概念 线程的定义 线程是操作系统能够进行运算调度的最小单位。它被包含在进程之中&#xff0c;是进程中的实际运作单位。一条线程指的是进程中一个单一顺序的控制流&#xff0c;一个进程中可以并发多个线程&#xff0c;每条线程并行执行不同的任务…
阅读更多...
《机器学习by周志华》学习笔记-决策树-01

《机器学习by周志华》学习笔记-决策树-01

本书中的「决策树」有时指学习方法，有时指学得的树。 1、基本流程 1.1、概念 基本流程，亦称「判定树」 决策树(decision tree)，是一种常见的机器学习方法。以二分类任务为例，我们希望从给定训练数据集学得一个模型，用以对新样例进行分离。 以二分类任务为例，可看作对…
阅读更多...
揭秘微服务架构：十大设计模式助力企业数字化转型

揭秘微服务架构：十大设计模式助力企业数字化转型

微服务架构中10个常用的设计模式 微服务是一种架构风格&#xff0c;它将一个复杂的应用拆分成多个独立自治的服务&#xff0c;每个服务负责应用程序中的一小部分功能。这些服务通过定义良好的API进行通信&#xff0c;通常是HTTP RESTful API或事件流。微服务架构的主要特点包括…
阅读更多...
深入学习指针3

深入学习指针3

目录 前言 1.二级指针 2.指针数组 3.指针数组模拟二维数组 前言 Hello,小伙伴们我又来了&#xff0c;上期我们讲到了数组名的理解&#xff0c;指针与数组的关系等知识&#xff0c;那今天我们就继续深入到学习指针域数组的练联系&#xff0c;如果喜欢作者菌生产的内容还望不…
阅读更多...
攻略：大学生三下乡投稿媒体网站和快速方法

攻略：大学生三下乡投稿媒体网站和快速方法

作为当代大学生,不仅需要学习和掌握知识,更需要将所学知识运用到实践中,参与各种社会实践活动。其中,“三下乡”活动就是一个非常有意义的社会实践活动。三下乡社会实践活动新闻稿投稿网站有哪些?有哪些方式可以快速投稿呢&#xff1f;今天小编给大家一次讲个明白。 三下乡新…
阅读更多...
C 语言中怎么产生真正的随机数？

C 语言中怎么产生真正的随机数？

在C语言中&#xff0c;要产生真正的随机数&#xff0c;我们通常使用标准库中的 <stdlib.h> 头文件中提供的随机数生成函数。 这些函数可以生成伪随机数&#xff0c;但它们在一定程度上是随机的&#xff0c;足以满足大多数应用程序的需求。 1. 伪随机数生成函数 C标准库…
阅读更多...
【从零开始学架构 架构基础】架构设计的本质、历史背景和目的

【从零开始学架构 架构基础】架构设计的本质、历史背景和目的

本文是《从零开始学架构》的第一篇学习笔记&#xff0c;主要理解架构的设计的本质定义、历史背景以及目的。 架构设计的本质 分别从三组概念的区别来理解架构设计。 系统与子系统 什么是系统&#xff0c;系统泛指由一群有关联的个体组成&#xff0c;根据某种规则运作&#…
阅读更多...
Java实现的网上书店系统（附带完整源码）

Java实现的网上书店系统（附带完整源码）

作者声明:文章仅供学习交流与参考!严禁用于任何商业与非法用途!否则由此产生的一切后果均与作者 实现技术：JSP技术；javaBean；servlet；MySql数据库。 系统功能结构图 该系统为MVC结构，它的运行环境分客户端、应用服务器端和数据库服务器端三部分 书店系统需求分析： 通过…
阅读更多...
Git泄露（续）

Git泄露（续）

接上一篇补充 git config --global user.name " " git config --global user.email 邮箱地址 配置用户名和邮箱 git commit 使其处于交互区&#xff0c;没有使用 -m&#xff0c;默认用vim 来编辑和提交信息 输入要提交的内容&#xff0c;然后按ESC建回到命令…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023