41：canvas - 下

news2024/11/30 5:40:53

一、转换

转换

  • 在canvas内，也可以像css一样有一些类似于css2D转换的效果
  1. 位移
    • 语法：ctx.translate(x, y)
    • 注意：一定要在绘制（描边或填充）之前，进行位移
  1. 缩放
    • 语法：ctx.scale(x, y)
    • 注意：一定要在绘制（描边或填充）之前，进行缩放
  1. 旋转
    • 语法：ctx.rotate(弧度值)
      • 角度转弧度公式：弧度 = Math.PI/180*角度
    • 注意：一定要在绘制（描边或填充）之前，进行旋转
    • 旋转的圆心为画布的 0，0 点，可以配合 位移 修改旋转的中心

img

  1. 注意：
    • canvas所有的转换操作都不只是在操作某个形状，而是对整个画布进行转换
    • 如果需要对多个形状进行不同的转换，在每次绘制之前都需要先保存画笔状态，绘制之后重置画笔状态
      • 保存画笔状态：ctx.save();
        • 一般存在与转换之前
      • 重置画笔状态：ctx.restore();
        • 一般存在于转换之后
// 绘制两个矩形
ctx.strokeRect(100, 100, 100, 100);
ctx.strokeRect(300, 100, 100, 100);// 绘制两个矩形
ctx.strokeRect(100, 100, 100, 100);
ctx.strokeRect(300, 100, 100, 100);

img

// 对画布进行旋转
ctx.rotate(0.5);
ctx.strokeRect(100, 100, 100, 100);
ctx.strokeRect(300, 100, 100, 100);// 对画布进行旋转
ctx.rotate(0.5);
ctx.strokeRect(100, 100, 100, 100);
ctx.strokeRect(300, 100, 100, 100);

img

// 将 旋转和其中一个矩形绘制 存储为一次记录
ctx.save();
ctx.rotate(0.5);
ctx.strokeRect(100, 100, 100, 100);
ctx.restore();

ctx.strokeRect(300, 100, 100, 100);// 将 旋转和其中一个矩形绘制 存储为一次记录
ctx.save();
ctx.rotate(0.5);
ctx.strokeRect(100, 100, 100, 100);
ctx.restore();

ctx.strokeRect(300, 100, 100, 100);

img

二、渐变色

  1. canvas的渐变色，就是提前配置好渐变色方案（从颜色1向颜色2过渡），然后将渐变色方案，设置给填充样式即可
  2. 渐变形式
    • 线性渐变
      • 创建渐变：const lg = ctx.createLinearGradient(起点x坐标, 起点y坐标, 终点x坐标, 终点y坐标)
        • 指定渐变范围
      • 添加渐变色：lg.addColorStop(0, 'red')
        • 向指定位置添加颜色，0表示开始坐标，1表示结束坐标，中间部分会自动填充渐变色
  const canvas = document.querySelector(".mycanvas");

  canvas.width = 800;
  canvas.height = 400;

  const ctx = canvas.getContext("2d");

  const lg = ctx.createLinearGradient(0, 0, 800, 400);
  
  lg.addColorStop(0, 'red');
  lg.addColorStop(1, 'green');

  ctx.fillStyle = lg;
  ctx.fillRect(0, 0, 800, 400);  const canvas = document.querySelector(".mycanvas");

  canvas.width = 800;
  canvas.height = 400;

  const ctx = canvas.getContext("2d");

  const lg = ctx.createLinearGradient(0, 0, 800, 400);
  
  lg.addColorStop(0, 'red');
  lg.addColorStop(1, 'green');

  ctx.fillStyle = lg;
  ctx.fillRect(0, 0, 800, 400);

img

    • 径向渐变
      • 创建渐变：const lg = ctx.createRadialGradient(x1, y1, r1, x2, y2, r2);
        • x1：起始圆圆心 x 轴坐标
        • y1：起始圆圆心 y 轴坐标
        • r1：起始圆半径
        • x2：终止圆圆心 x 轴坐标
        • y2：终止圆圆心 y 轴坐标
        • r2：终止圆半径
      • 添加渐变色：lg.addColorStop(0, 'red')
        • 同线性渐变
const canvas = document.querySelector(".mycanvas");

canvas.width = 800;
canvas.height = 400;

const ctx = canvas.getContext("2d");

const lg = ctx.createRadialGradient(200, 200, 50, 200, 200, 200);

lg.addColorStop(0, 'red');
lg.addColorStop(1, 'green');

ctx.fillStyle = lg;
ctx.fillRect(0, 0, 800, 400);const canvas = document.querySelector(".mycanvas");

canvas.width = 800;
canvas.height = 400;

const ctx = canvas.getContext("2d");

const lg = ctx.createRadialGradient(200, 200, 50, 200, 200, 200);

lg.addColorStop(0, 'red');
lg.addColorStop(1, 'green');

ctx.fillStyle = lg;
ctx.fillRect(0, 0, 800, 400);

img

  1. 多区域不同渐变
    • 本质为配置多套渐变方案，绘制到不同的形状
const canvas = document.querySelector(".mycanvas");

canvas.width = 800;
canvas.height = 400;

const ctx = canvas.getContext("2d");

const rg = ctx.createRadialGradient(200, 200, 50, 200, 200, 200);
rg.addColorStop(0, 'red');
rg.addColorStop(1, 'green');

ctx.fillStyle = rg;
ctx.fillRect(0, 0, 400, 400);

const lg = ctx.createLinearGradient(400, 0, 800, 0);
lg.addColorStop(0, 'blue');
lg.addColorStop(1, 'yellow');
ctx.fillStyle = lg;
ctx.fillRect(400, 0, 400, 400);const canvas = document.querySelector(".mycanvas");

canvas.width = 800;
canvas.height = 400;

const ctx = canvas.getContext("2d");

const rg = ctx.createRadialGradient(200, 200, 50, 200, 200, 200);
rg.addColorStop(0, 'red');
rg.addColorStop(1, 'green');

ctx.fillStyle = rg;
ctx.fillRect(0, 0, 400, 400);

const lg = ctx.createLinearGradient(400, 0, 800, 0);
lg.addColorStop(0, 'blue');
lg.addColorStop(1, 'yellow');
ctx.fillStyle = lg;
ctx.fillRect(400, 0, 400, 400);

img

三、贝塞尔曲线

  • 贝塞尔曲线（Bezier curve）是计算机图形学中相当重要的参数曲线，它通过一个方程来描述一条曲线，根据方程的最高阶数，又分为线性贝赛尔曲线，二次贝塞尔曲线、三次贝塞尔曲线和更高阶的贝塞尔曲线。

    • 贝塞尔曲线需要提供几个点的参数，首先是 曲线的起点和终点
    • 如果控制点数量为 0，我们称之为线性贝塞尔；
    • 控制点数量为 1，则为二阶贝塞尔曲线；
    • 控制点数量为 2，则为三阶贝塞尔曲线，依此类推。
  1. 二阶贝塞尔曲线
    • 其实就是由 三个点 绘制成两个直线
    • 然后同时从每条直线的起点开始，向终点移动，按比例拿到点。然后将这些点再连接，产生 n - 1 条直线。
    • 就这样，我们继续同样的操作的，直到变成一条直线，然后再按比例取到一个点，这个点就是曲线经过的点。
    • 当我们比例一点点变大（从 0 到 1），就拿到了曲线中间的所有点，最终绘制出完整的曲线。

img

  1. 再来看看三阶贝塞尔曲线
    • 和二阶贝塞尔曲线是一个道理，只不过控制点数量变成了两个

img

  1. 在canvas中不需要我们手动计算这么多点，canvas直接提供了相关的API
    • 二阶贝塞尔曲线：ctx.quadraticCurveTo(p1x, p1y, p2x, p2y)
    • 三阶贝塞尔曲线：ctx.bezierCurveTo(p1x, p1y, p2x, p2y, p3x, p3y)
    • 在此之前需要先使用 moveTo 确定 p0 的位置

二阶

const cvs = document.querySelector(".cvs");
cvs.width = 400;
cvs.height = 400;

const ctx = cvs.getContext("2d");

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.quadraticCurveTo(300, 200, 200, 300);
ctx.stroke();const cvs = document.querySelector(".cvs");
cvs.width = 400;
cvs.height = 400;

const ctx = cvs.getContext("2d");

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.quadraticCurveTo(300, 200, 200, 300);
ctx.stroke();

img

三阶

const cvs = document.querySelector(".cvs");
cvs.width = 400;
cvs.height = 400;

const ctx = cvs.getContext("2d");

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.bezierCurveTo(60, 80, 150, 30, 170, 150);
ctx.stroke();const cvs = document.querySelector(".cvs");
cvs.width = 400;
cvs.height = 400;

const ctx = cvs.getContext("2d");

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.bezierCurveTo(60, 80, 150, 30, 170, 150);
ctx.stroke();

img

多阶

ctx.beginPath();
ctx.moveTo(75, 25);
ctx.quadraticCurveTo(25, 25, 25, 62.5);
ctx.quadraticCurveTo(25, 100, 50, 100);
ctx.quadraticCurveTo(50, 120, 30, 125);
ctx.quadraticCurveTo(60, 120, 65, 100);
ctx.quadraticCurveTo(125, 100, 125, 62.5);
ctx.quadraticCurveTo(125, 25, 75, 25);
ctx.stroke();ctx.beginPath();
ctx.moveTo(75, 25);
ctx.quadraticCurveTo(25, 25, 25, 62.5);
ctx.quadraticCurveTo(25, 100, 50, 100);
ctx.quadraticCurveTo(50, 120, 30, 125);
ctx.quadraticCurveTo(60, 120, 65, 100);
ctx.quadraticCurveTo(125, 100, 125, 62.5);
ctx.quadraticCurveTo(125, 25, 75, 25);
ctx.stroke();
ctx.moveTo(75, 40);
ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
ctx.fill();ctx.moveTo(75, 40);
ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
ctx.fill();

四、绘制图片

  1. 创建图片（非canvas操作）
    • 创建图片对象：const img = new Image();
    • 设置资源地址：img.src = "图片地址"
    • 资源加载完成：img.onload = function(){ / * 图片加载完成 */ }
  1. 将图片绘制到canvas
    • 三个参数：gd.drawImage(图片对象, x, y)
      • 从画布的 x，y 坐标开始绘制
const canvas = document.querySelector(".mycanvas");

canvas.width = 800;
canvas.height = 400;

const ctx = canvas.getContext("2d");

const img = new Image();
img.src = "../1.png";

img.onload = function(){
  ctx.drawImage(this, 0, 100);
}const canvas = document.querySelector(".mycanvas");

canvas.width = 800;
canvas.height = 400;

const ctx = canvas.getContext("2d");

const img = new Image();
img.src = "../1.png";

img.onload = function(){
  ctx.drawImage(this, 0, 100);
}

img

    • 五个参数：gd.drawImage(图片对象, x, y, w, h)
      • 从画布的 x，y 坐标开始绘制，绘制到 宽w，高h 的区域
const canvas = document.querySelector(".mycanvas");

canvas.width = 800;
canvas.height = 400;

const ctx = canvas.getContext("2d");

const img = new Image();
img.src = "../1.png";

img.onload = function(){
  ctx.drawImage(this, 0, 100, 200, 200);
}const canvas = document.querySelector(".mycanvas");

canvas.width = 800;
canvas.height = 400;

const ctx = canvas.getContext("2d");

const img = new Image();
img.src = "../1.png";

img.onload = function(){
  ctx.drawImage(this, 0, 100, 200, 200);
}

img

    • 九个参数：gd.drawImage(图片对象, sx, sy, sw, sh, dx, dy, dw, dh)
      • s = source 原图 位置 宽高
      • d = destination 目标（画布）画在哪，画多大
const canvas = document.querySelector(".mycanvas");

canvas.width = 800;
canvas.height = 400;

const ctx = canvas.getContext("2d");

const img = new Image();
img.src = "../1.png";
// 图片资源宽高
const imgW = 128;
const imgH = 194;
img.width = 128;
img.height = 194;

img.onload = function(){
  ctx.drawImage(this, 0, 0, imgW/4, imgH/4, 0, 100, imgW/4, imgH/4);
}const canvas = document.querySelector(".mycanvas");

canvas.width = 800;
canvas.height = 400;

const ctx = canvas.getContext("2d");

const img = new Image();
img.src = "../1.png";
// 图片资源宽高
const imgW = 128;
const imgH = 194;
img.width = 128;
img.height = 194;

img.onload = function(){
  ctx.drawImage(this, 0, 0, imgW/4, imgH/4, 0, 100, imgW/4, imgH/4);
}

img

五、事件

  1. canvas内没有事件系统，只能通过给canvas元素添加事件，配合事件对象，手动检测事件区域
  2. 矩形检测公式：
    • 点击x > 矩形x && 点击x < 矩形x + 矩形w && 点击y > 矩形y && 点击y < 矩形y + 矩形h
  1. 圆形检测公式：
    • 利用勾股定理：a^2 + b^2 = c^2
    • a = 圆心x - 点击x
    • b = 圆心y - 点击y
    • c = Math.sqrt( a * a + b * b )
    • 若 c < r ，则在圆形区域内
  1. 自动检测
    • ctx.isPointInPath(x, y)
    • 返回值：布尔值，表示指定坐标是否在一个路径范围内

六、导出（了解）

download.onclick = function(){
  // 将canvas数据转成base64数据
  const base64 = canvas.toDataURL("image/png");
  // 将base64数据解码
  const strBase64 = atob( base64.split(",")[1] );
  // 创建utf-8原始数据（长度为base64解码后的字符长度）
  const utf_8 = new Uint8Array(strBase64.length);
  // 将base64解码后的数据转成Unicode编码后，存入utf-8数组
  for(let n=0;n<strBase64.length;n++){
    utf_8[n] = strBase64.charCodeAt(n)
  }
  // 根据utf-8数据，创建文件对象
  const file = new File([utf_8], "测试图片", {type:"image/png"});
  // 根据文件对象创建url字符
  const href = URL.createObjectURL(file);
  // 准备a标签，用于下载文件
  const a = document.createElement("a");
  a.href = href;
  a.download = "测试图片";
  document.body.appendChild(a);
  a.click();
  // 删除a标签
  a.remove();
  // 释放指向文件资源的url字符
  URL.revokeObjectURL(href);
}download.onclick = function(){
  // 将canvas数据转成base64数据
  const base64 = canvas.toDataURL("image/png");
  // 将base64数据解码
  const strBase64 = atob( base64.split(",")[1] );
  // 创建utf-8原始数据（长度为base64解码后的字符长度）
  const utf_8 = new Uint8Array(strBase64.length);
  // 将base64解码后的数据转成Unicode编码后，存入utf-8数组
  for(let n=0;n<strBase64.length;n++){
    utf_8[n] = strBase64.charCodeAt(n)
  }
  // 根据utf-8数据，创建文件对象
  const file = new File([utf_8], "测试图片", {type:"image/png"});
  // 根据文件对象创建url字符
  const href = URL.createObjectURL(file);
  // 准备a标签，用于下载文件
  const a = document.createElement("a");
  a.href = href;
  a.download = "测试图片";
  document.body.appendChild(a);
  a.click();
  // 删除a标签
  a.remove();
  // 释放指向文件资源的url字符
  URL.revokeObjectURL(href);
}

七、总结

  • 位移：ctx.translate(x, y)
  • 旋转：ctx.rotate(弧度值)
  • 缩放：ctx.scale(x, y)
  • 保存画笔状态：ctx.save()
  • 重置画笔状态：ctx.restore()
  • 创建线性渐变：ctx.createLinearGradient(起点x坐标, 起点y坐标, 终点x坐标, 终点y坐标)
  • 创建径向渐变：const lg = ctx.createRadialGradient(x1, y1, r1, x2, y2, r2);
  • 添加渐变色：lg.addColorStop(0, 'red')
  • 绘制图片：gd.drawImage(图片对象, x, y)
  • 检测指定坐标是否在某个路径范围内：ctx.isPointInPath(x, y)

八、拓展 - requestAnimationFrame

requestAnimationFrame

九、作业

  1. 机械时钟
  2. 运动的小人
  3. 飞机大战
    x.translate(x, y)`
  • 旋转：ctx.rotate(弧度值)
  • 缩放：ctx.scale(x, y)
  • 保存画笔状态：ctx.save()
  • 重置画笔状态：ctx.restore()
  • 创建线性渐变：ctx.createLinearGradient(起点x坐标, 起点y坐标, 终点x坐标, 终点y坐标)
  • 创建径向渐变：const lg = ctx.createRadialGradient(x1, y1, r1, x2, y2, r2);
  • 添加渐变色：lg.addColorStop(0, 'red')
  • 绘制图片：gd.drawImage(图片对象, x, y)
  • 检测指定坐标是否在某个路径范围内：ctx.isPointInPath(x, y)

八、拓展 - requestAnimationFrame

requestAnimationFrame

九、作业

  1. 机械时钟
  2. 运动的小人
  3. 飞机大战
  4. 折线图

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

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

相关文章

Servlet的过滤器

Servlet的过滤器

过滤器: 使用传统的方式需要在每个页面进行验证造成代码的冗余功能重复麻烦过滤器【统计进行验证、鉴权、日志、事务】拦截请求、过滤响应 配置一个Servlet package com.sparrow.servlet;import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; im…
阅读更多...
华为鲲鹏920 aarch64 版本 Ambari HDP 下载地址

华为鲲鹏920 aarch64 版本 Ambari HDP 下载地址

声明&#xff1a;为有效缓解各位同行兄弟们的痛&#xff0c;特推出此文 本文能够适配兼容 华为鲲鹏920 aarch64 版本&#xff0c;仅限 CentOS7、openEuler20.03-LTS 操作系统 以下是详细下载地址 1、CentOS7 aarch64版本 CentOS7 aarch64 https://mirrors.huaweicloud.com/…
阅读更多...
C# 抽象类和接口详解

C# 抽象类和接口详解

参考视频链接&#xff1a;https://www.bilibili.com/video/BV13b411b7Ht?p27&vd_source10065785c7e10360d831474364e0d3e3 代码的进化与重构&#xff0c;从基本代码的讲解到逐步抽象成抽象类和接口。 文章目录 最初定义利用继承改进对方法进一步改进利用虚函数进行改进利…
阅读更多...
设计模式结合场景（1）——支付场景（策略+工厂+模板）

设计模式结合场景（1）——支付场景（策略+工厂+模板）

ps&#xff1a;以下示例仅供参考&#xff0c;设计模式只是一种思想&#xff0c;至于怎么千变万化就看大家了。 一、背景 面试官&#xff1a;你们项目的支付场景用了哪些设计模式&#xff0c;为什么要这么做&#xff1f; 二、方案 使用策略模式定义不同支付方式的具体支付策略&…
阅读更多...
[深度学习实战]基于PyTorch的深度学习实战(上)[变量、求导、损失函数、优化器]

[深度学习实战]基于PyTorch的深度学习实战(上)[变量、求导、损失函数、优化器]

目录 一、前言二、深度学习框架——PyTorch2.1 PyTorch介绍2.2 Python安装详解2.3 PyTorch安装详解 三、变量四、求导五、损失函数5.1 nn.L1Loss5.2 nn.SmoothL1Loss5.3 nn.MSELoss5.4 nn.BCELoss5.5 nn.CrossEntropyLoss5.6 nn.NLLLoss5.7 nn.NLLLoss2d 六、优化器Optim 6.1 …
阅读更多...
ARM Coresight 系列文章 8 - ARM Coresight 通过 APBIC 级联使用

ARM Coresight 系列文章 8 - ARM Coresight 通过 APBIC 级联使用

文章目录 APBIC 回顾APBIC 级联 上篇文章&#xff1a;ARM Coresight 系列文章 7 - ARM Coresight 通过 AHB-AP 访问 异构 cpu 内部 coresight 组件 APBIC 回顾 APBIC 可以连接一个或者多个APB BUS masters&#xff0c; 例如连接一个 APB-AP 组件和带有 APB 接口的 Processor&…
阅读更多...
Java源码规则引擎：jvs-rules数据扩展及函数配置说明

Java源码规则引擎：jvs-rules数据扩展及函数配置说明

jvs-rules数据拓展节点 数据拓展是数据可视化加工过程中的重要工具&#xff0c;它核心的作用是对原有数据表进行加工扩展&#xff0c;实现功能如下图所示 函数配置操作过程 操作说明 1、拖动数据拓展字段&#xff0c;并将字段拓展与之前的历史节点连接起来&#xff0c;点击数…
阅读更多...
浅谈linux前台进程与后台进程同步异步执行的理解

浅谈linux前台进程与后台进程同步异步执行的理解

最近书上看到前台进程以及后台进程的定义&#xff0c;有点令人费解。 linux终端输入一条命令&#xff0c;创建一个子进程运行这条命令&#xff0c;在这条命令进程执行完之前&#xff0c;终端shell都无法接收新的一条命令&#xff1b;只有这条命令运行结束后&#xff0c;当前终…
阅读更多...
Vue项目实现在线预览pdf，并且可以批量打印pdf

Vue项目实现在线预览pdf，并且可以批量打印pdf

最近遇到一个需求，就是要在页面上呈现pdf内容，并且还能用打印机批量打印pdf，最终效果如下： 当用户在列表页面，勾选中两条数据后，点击“打印表单”按钮之后，会跳到如下的预览页面： 预览页面顶部有个吸顶的效果，然后下方就展示出了2个pdf文件对应的内容，我们接着点击“…
阅读更多...
Vsiual Stdio 生成动态链接库 / 命令行CMD工具打不开 / 64和32位动态链接库生成 dll

Vsiual Stdio 生成动态链接库 / 命令行CMD工具打不开 / 64和32位动态链接库生成 dll

打开vistual studio&#xff0c;选择目标文件夹。 菜单栏选择工具->命令行->开发者命令提示 通过 这种方法打开的编译器版本是 32位&#xff08;x86&#xff09;的 64位的编译器通过以下方法打开 修改文件路径 1)Cd 路径 2) 盘符&#xff1a; 输入命令行代码 cl /c Se…
阅读更多...
SpringBoot整合SpringSecurity+JWT

SpringBoot整合SpringSecurity+JWT

SpringBoot整合SpringSecurityJWT 整合SpringSecurity步骤 编写拦截链配置类&#xff0c;规定security参数拦截登录请求的参数&#xff0c;对该用户做身份认证。通过登录验证的予以授权&#xff0c;这里根据用户对应的角色作为授权标识。 整合JWT步骤 编写JWTUtils&#xf…
阅读更多...
精智达在科创板上市：募资约11亿元，深创投等为其股东

精智达在科创板上市：募资约11亿元，深创投等为其股东

7月18日&#xff0c;深圳精智达技术股份有限公司&#xff08;下称“精智达”&#xff0c;SH:688627&#xff09;在上海证券交易所科创板上市。本次上市&#xff0c;精智达的发行价为46.77元/股&#xff0c;发行数量为2350.2939万股&#xff0c;募资总额为10.99亿元&#xff0c;…
阅读更多...
封装cpp-httplib成dll包，为老项目提供http网络支持

封装cpp-httplib成dll包，为老项目提供http网络支持

项目介绍&#xff1a; 公司内某些老的项目不支持https或者http1.1的一些新功能&#xff0c;需要开发对应的SDK供其调用&#xff0c;以便维护老项目。 第一步&#xff1a;下载cpp-httplib 点击这里去下载最新的代码&#xff1a;mirrors / yhirose / cpp-httplib GitCode 直接下…
阅读更多...
QT:问题、解决与原因

QT:问题、解决与原因

在这里记录一些自己遇到的在QT开发上面的小问题和tips 目录 QComboBox 设置qss样式不生效qt按钮设置点击释放效果实现效果 QComboBox 设置qss样式不生效 我设置的样式是&#xff1a; box->setStyleSheet("QComboBox {""border: none;""padding:…
阅读更多...
适用于 Type-C接口PD应用的智能二极管保护开关

适用于 Type-C接口PD应用的智能二极管保护开关

日前&#xff0c;集设计、研发、生产和全球销售一体的著名功率半导体、芯片及数字电源产品供应商Alpha and Omega Semiconductor Limited&#xff08;AOS, 纳斯达克代码:AOSL) 推出一款采用理想二极管运作进行反向电流保护的新型Type-C PD 高压电源输入保护开关。AOZ13984DI-02…
阅读更多...
上市公司前端开发规范参考

上市公司前端开发规范参考

上市公司前端开发规范参考 命名规则通用约定文件与目录命名HTML命名CSS命名JS命名 代码格式通用约定HTML格式CSS格式JS格式注释 组件组件大小单文件组件容器组件组件使用说明Prop指令缩写组件通讯组件的挂载和销毁按需加载第三方组件库的规定 脚手架使用规范移动端脚手架PC端脚…
阅读更多...
Linux下安装Elasticsearch以及ES-head插件

Linux下安装Elasticsearch以及ES-head插件

Linux下安装ElasticSearch以及ES-head插件 安装Elasticsearch 由于Elasticsearch客户端版本和ElasticSearch版本有对应关系&#xff0c;所以建议安装之前先考虑安装哪个版本的ElasticSearch。 ElasticSearch、Spring Data Elasticsearch、SpringBoot、Spring版本对应关系 安…
阅读更多...
OpenCV for Python 学习第五天：图片属性的获取

OpenCV for Python 学习第五天：图片属性的获取

上一篇博文当中&#xff0c;我们学习了如何获取图片的通道&#xff0c;我们了解了通道的分离方法split()和通道的组合方法merge()。那么我们今天就来对图片的属性做一个深入的了解。 文章目录 图片属性OpenCV中属性介绍图片属性的获取 图片属性 图片属性是指描述和定义一张图片…
阅读更多...
爬虫与反爬虫的攻防对抗

爬虫与反爬虫的攻防对抗

一、爬虫的简介 1 概念 爬虫最早源于搜索引擎&#xff0c;它是一种按照一定的规则&#xff0c;自动从互联网上抓取信息的程序&#xff0c;又被称为爬虫&#xff0c;网络机器人等。按爬虫功能可以分为网络爬虫和接口爬虫&#xff0c;按授权情况可以分为合法爬虫和恶意爬虫。恶…
阅读更多...
【NLP】从预训练模型中获取Embedding

【NLP】从预训练模型中获取Embedding

从预训练模型中获取Embedding 背景说明下载IMDB数据集进行分词下载并预处理GloVe词嵌入数据构建模型训练模型并可视化结果结果对比其他代码 在NLP领域中&#xff0c;构建大规模的标注数据集非常困难&#xff0c;以至于仅用当前语料无法有效完成特定任务。可以采用迁移学习的方法…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023