9_HTML5 SVG (5) --[HTML5 API 学习之旅]

news2024/12/22 5:33:54

SVG 模糊效果

HTML5中的SVG（可缩放矢量图形）允许我们创建高质量的二维图形，包括应用各种滤镜效果。模糊效果是通过<feGaussianBlur>滤镜原语来实现的。下面我将给出4个使用SVG进行模糊效果处理的示例，并为每个代码段添加详细的注释。

示例1：基本模糊效果

<!-- 创建一个SVG元素 -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 定义一个滤镜，ID为blurEffect -->
  <defs>
    <filter id="blurEffect">
      <!-- 使用feGaussianBlur对目标对象进行模糊处理 -->
      <!-- stdDeviation定义了模糊的程度，值越大越模糊 -->
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
  </defs>
  <!-- 应用滤镜到矩形上 -->
  <rect x="50" y="50" width="100" height="100" style="fill:blue;" filter="url(#blurEffect)" />
</svg>

在这里插入图片描述

示例2：不同方向的模糊

<!-- SVG画布 -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 定义一个具有不同X和Y轴模糊程度的滤镜 -->
    <filter id="directionalBlur">
      <!-- 分别设置stdDeviation的x和y值，以获得不同的水平和垂直模糊效果 -->
      <feGaussianBlur in="SourceGraphic" stdDeviation="10 5" />
    </filter>
  </defs>
  <!-- 矩形应用了不同方向的模糊效果 -->
  <rect x="50" y="50" width="100" height="100" style="fill:green;" filter="url(#directionalBlur)" />
</svg>

在这里插入图片描述

示例3：多重模糊效果

<!-- SVG容器 -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 定义一个组合滤镜，包含两个连续的模糊操作 -->
    <filter id="multiBlur">
      <!-- 第一次模糊 -->
      <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur1"/>
      <!-- 第二次模糊，基于第一次模糊的结果 -->
      <feGaussianBlur in="blur1" stdDeviation="6" />
    </filter>
  </defs>
  <!-- 圆形应用了双重模糊效果 -->
  <circle cx="100" cy="100" r="50" style="fill:red;" filter="url(#multiBlur)" />
</svg>

在这里插入图片描述

示例4：模糊与颜色混合

<!-- SVG画布 -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 定义一个复杂的滤镜，先模糊后改变颜色 -->
    <filter id="blurAndColor">
      <!-- 模糊处理 -->
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blurred"/>
      <!-- 将模糊后的图像的颜色变为蓝色 -->
      <feFlood flood-color="blue" result="color"/>
      <!-- 将模糊效果与颜色相乘 -->
      <feComposite in="blurred" in2="color" operator="in" />
    </filter>
  </defs>
  <!-- 文本应用了模糊和颜色混合的效果 -->
  <text x="50%" y="50%" font-size="24" fill="red" text-anchor="middle" filter="url(#blurAndColor)">
    Hello World
  </text>
</svg>

在这里插入图片描述

这些示例展示了如何在SVG中利用<feGaussianBlur>滤镜原语来创建不同的模糊效果。你可以根据需要调整stdDeviation属性的值来控制模糊强度，或者结合其他滤镜原语创造更加复杂的效果。

SVG 阴影

HTML5中的SVG（可缩放矢量图形）允许我们创建高质量的二维图形，包括应用各种滤镜效果。阴影效果是通过<feDropShadow>滤镜原语来实现的。下面我将给出4个使用SVG进行阴影效果处理的示例，并为每个代码段添加详细的注释。

示例1：基本阴影效果

<!-- 创建一个SVG元素，并设定其宽度和高度 -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 使用<defs>元素定义图形对象或样式，这些不会直接渲染到画布上，而是作为后续引用的资源 -->
  <defs>
    <!-- 定义一个滤镜效果，给它一个唯一的ID以便引用 -->
    <filter id="basicShadow">
      <!-- feDropShadow用于创建阴影效果 -->
      <!-- 属性解释：
           dx: 阴影相对于目标对象在X轴上的偏移量，正值表示向右移动
           dy: 阴影相对于目标对象在Y轴上的偏移量，正值表示向下移动
           stdDeviation: 定义了阴影边缘的模糊程度，值越大越模糊
           flood-color: 设置阴影的颜色，默认是黑色（black）
      -->
      <feDropShadow dx="4" dy="4" stdDeviation="2" flood-color="black"/>
    </filter>
  </defs>
  
  <!-- 在SVG画布上绘制一个矩形 -->
  <!-- 属性解释：
       x: 矩形左上角的X坐标
       y: 矩形左上角的Y坐标
       width: 矩形的宽度
       height: 矩形的高度
       style: CSS样式属性，这里用来设置填充颜色（fill）
       filter: 引用之前定义的滤镜效果，通过url()函数指定滤镜的ID
  -->
  <rect x="50" y="50" width="100" height="100" style="fill:blue;" filter="url(#basicShadow)" />
</svg>

在这里插入图片描述

示例2：彩色阴影

<!-- SVG画布 -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 使用<defs>元素定义图形对象或样式，这些不会直接渲染到画布上，而是作为后续引用的资源 -->
  <defs>
    <!-- 定义一个具有特定颜色（红色）阴影效果的滤镜，并给它一个唯一的ID以便引用 -->
    <filter id="coloredShadow">
      <!-- feDropShadow用于创建阴影效果。
           属性解释：
           dx: 阴影相对于目标对象在X轴上的偏移量。正值表示阴影向右移动；这里设置为6。
           dy: 阴影相对于目标对象在Y轴上的偏移量。正值表示阴影向下移动；这里也设置为6。
           stdDeviation: 定义了阴影边缘的模糊程度。值越大，阴影越模糊；这里设置为3。
           flood-color: 设置阴影的颜色；这里设置为红色（red），使得阴影呈现红色。
      -->
      <feDropShadow dx="6" dy="6" stdDeviation="3" flood-color="red"/>
    </filter>
  </defs>
  
  <!-- 在SVG画布上绘制一个圆形，并应用之前定义的红色阴影效果 -->
  <!-- 属性解释：
       cx: 圆心的X坐标，这里设置为100，意味着圆心位于画布水平方向的中间位置。
       cy: 圆心的Y坐标，这里设置为100，意味着圆心位于画布垂直方向的中间位置。
       r: 圆的半径，这里设置为50。
       style: CSS样式属性，这里用来设置填充颜色（fill）；这里设置为绿色（green），所以圆形将被填充为绿色。
       filter: 引用之前定义的滤镜效果，通过url()函数指定滤镜的ID；这里引用的是具有红色阴影效果的滤镜。
  -->
  <circle cx="100" cy="100" r="50" style="fill:green;" filter="url(#coloredShadow)" />
</svg>

在这里插入图片描述

示例3：多重阴影效果

<!-- SVG容器 -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 定义一个组合滤镜，包含两个连续的阴影操作 -->
    <filter id="multiShadow">
      <!-- 第一次阴影，较小的偏移和模糊 -->
      <feDropShadow dx="4" dy="4" stdDeviation="2" flood-color="rgba(0,0,0,0.5)" result="shadow1"/>
      <!-- 第二次阴影，较大的偏移和模糊 -->
      <feDropShadow in="SourceGraphic" dx="8" dy="8" stdDeviation="6" flood-color="rgba(0,0,0,0.7)" />
    </filter>
  </defs>
  <!-- 矩形应用了双重阴影效果 -->
  <rect x="50" y="50" width="100" height="100" style="fill:yellow;" filter="url(#multiShadow)" />
</svg>

在这里插入图片描述

示例4：内阴影效果

<!-- SVG画布 -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 使用<defs>元素定义图形对象或样式，这些不会直接渲染到画布上，而是作为后续引用的资源 -->
  <defs>
    <!-- 定义一个用于创建内阴影效果的复杂滤镜，并给它一个唯一的ID以便引用 -->
    <filter id="innerShadow">
      <!-- feComponentTransfer：对图像的颜色分量进行变换。
           in="SourceAlpha"：表示使用源图形的透明度（alpha通道）作为输入。
           result="source-alpha"：为这个操作的结果命名，以便在后续步骤中引用。
           feFuncA type="table" tableValues="1 0"：反转alpha通道，将完全透明变为完全不透明，反之亦然。这一步是为了创建一个与原始图形形状相同但颜色为黑色的副本，用于生成阴影。
      -->
      <feComponentTransfer in="SourceAlpha" result="source-alpha">
        <feFuncA type="table" tableValues="1 0"/>
      </feComponentTransfer>
      
      <!-- feGaussianBlur：应用高斯模糊效果。
           in="source-alpha"：表示使用之前创建的"source-alpha"作为模糊操作的输入。
           stdDeviation="3"：设置模糊的标准偏差，值越大，模糊越强；这里设置为3。
           result="blurred"：为这个模糊操作的结果命名，以便在后续步骤中引用。
      -->
      <feGaussianBlur in="source-alpha" stdDeviation="3" result="blurred"/>
      
      <!-- 再次使用feComponentTransfer，这次是反相模糊后的图像，以获得内部阴影的效果。
           in="blurred"：表示使用之前创建的模糊图像作为输入。
           result="inverted"：为这个反相操作的结果命名，以便在后续步骤中引用。
           feFuncA type="table" tableValues="0 1"：再次反转alpha通道，将之前的完全不透明变为完全透明，从而创建出内阴影效果。
      -->
      <feComponentTransfer in="blurred" result="inverted">
        <feFuncA type="table" tableValues="0 1"/>
      </feComponentTransfer>
      
      <!-- feComposite：组合两个图形。
           in2="inverted"：表示使用"inverted"作为第二个输入。
           in="SourceGraphic"：表示使用原始图形作为第一个输入。
           operator="over"：指定组合方式，这里是将"inverted"放在原始图形之下，模拟出内阴影的效果。
      -->
      <feComposite in2="inverted" in="SourceGraphic" operator="over"/>
    </filter>
  </defs>
  
  <!-- 在SVG画布上绘制文本，并应用之前定义的内阴影效果 -->
  <!-- 属性解释：
       x="50%" y="50%": 设置文本的位置，这里的百分比是相对于SVG画布的宽度和高度，意味着文本会位于画布的中心。
       font-size="24": 设置文本字体大小为24像素。
       fill="white": 设置文本颜色为白色。
       text-anchor="middle": 设置文本的锚点为中间，确保文本水平居中。
       filter="url(#innerShadow)": 引用之前定义的滤镜效果，通过url()函数指定滤镜的ID；这里引用的是具有内阴影效果的滤镜。
  -->
  <text x="50%" y="50%" font-size="24" fill="white" text-anchor="middle" filter="url(#innerShadow)">
    Inner Shadow
  </text>
</svg>

在这里插入图片描述

这些示例展示了如何在SVG中利用<feDropShadow>滤镜原语来创建不同的阴影效果。你可以根据需要调整dx、dy和stdDeviation属性的值来控制阴影的位置和模糊强度，或者结合其他滤镜原语创造更加复杂的效果，如内阴影。

SVG 渐变 - 线性

当然，下面是四个使用HTML5的SVG创建线性渐变的例子，并附有详细注释以帮助理解。

示例 1: 基本线性渐变

<!-- 创建一个200x200像素的SVG画布 -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- <defs>元素用于定义可以在SVG中重用的对象，如渐变、模式或滤镜。这些对象不会直接渲染到画布上 -->
  <defs>
    <!-- 定义一个线性渐变，并给它一个唯一的ID（grad1），以便在后续引用 -->
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <!-- 属性解释：
           x1, y1: 渐变起点的坐标（左上角），这里设置为(0%, 0%)表示从画布的左上角开始。
           x2, y2: 渐变终点的坐标（右上角），这里设置为(100%, 0%)表示到画布的右上角结束。
           这意味着渐变方向是从左到右的水平渐变。
      -->
      
      <!-- 定义渐变的颜色停止点（stop）。颜色从红色逐渐过渡到黄色 -->
      <!-- 第一个颜色停止点位于渐变的起始位置（offset="0%"），颜色为红色（rgb(255,0,0)），不透明度为1（完全不透明） -->
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      
      <!-- 第二个颜色停止点位于渐变的结束位置（offset="100%"），颜色为黄色（rgb(255,255,0)），不透明度同样为1 -->
      <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  
  <!-- 在SVG画布上绘制一个矩形，并使用之前定义的线性渐变填充 -->
  <!-- 属性解释：
       width, height: 设置矩形的宽度和高度，这里与SVG画布相同，即200x200像素。
       fill: 使用url()函数引用之前定义的渐变（grad1），作为矩形的填充样式。
  -->
  <rect width="200" height="200" fill="url(#grad1)" />
</svg>

在这里插入图片描述

示例 2: 竖直方向渐变

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 创建一个竖直方向的线性渐变，id为'grad2' -->
    <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
      <!-- 渐变颜色从蓝色到绿色 -->
      <stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect width="200" height="200" fill="url(#grad2)" />
</svg>

在这里插入图片描述

示例 3: 多色渐变

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 创建一个多色线性渐变，id为'grad3' -->
    <linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="100%">
      <!-- 分别设置三个不同位置的颜色 -->
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="50%" style="stop-color:rgb(0,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect width="200" height="200" fill="url(#grad3)" />
</svg>

在这里插入图片描述

示例 4: 不透明度渐变

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 创建一个带有不透明度变化的线性渐变，id为'grad4' -->
    <linearGradient id="grad4" x1="0%" y1="0%" x2="100%" y2="0%">
      <!-- 颜色固定为黑色，但不透明度从完全透明到完全不透明变化 -->
      <stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect width="200" height="200" fill="url(#grad4)" />
</svg>

在这里插入图片描述

每个示例都展示了如何在SVG中创建和应用线性渐变。通过调整x1, y1, x2, 和 y2属性，可以改变渐变的方向；通过添加更多的<stop>元素，可以增加更多颜色或调整颜色过渡的位置；最后，通过修改stop-opacity属性，可以控制颜色的不透明度。

SVG 渐变- 放射性

当然可以，下面是4个使用SVG定义放射性渐变（径向渐变）的HTML5示例。每个例子都会包含详细的注释来帮助理解代码。

示例 1: 基本放射性渐变

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 定义一个放射性渐变 -->
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <!-- 属性解释：
           cx, cy: 渐变圆心的坐标，这里设置为画布的中心(50%, 50%)。
           r: 渐变圆的半径，设置为画布宽度或高度的一半(50%)。
           fx, fy: 渐变焦点的位置，通常与圆心相同，但也可以不同以创建偏移效果。
      -->
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </radialGradient>
  </defs>
  <circle cx="100" cy="100" r="90" fill="url(#grad1)" />
</svg>

在这里插入图片描述

示例 2: 不同圆心和焦点的放射性渐变

<!-- 创建一个200x200像素的SVG画布 -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- <defs>元素用于定义可以在SVG中重用的对象，如渐变、模式或滤镜。这些对象不会直接渲染到画布上 -->
  <defs>
    <!-- 定义一个带有不同圆心和焦点位置的放射性（径向）渐变，并给它一个唯一的ID（grad2），以便在后续引用 -->
    <radialGradient id="grad2" cx="70%" cy="30%" r="70%" fx="30%" fy="70%">
      <!-- 属性解释：
           cx, cy: 渐变圆心的坐标，这里设置为(70%, 30%)，表示圆心位于画布宽度的70%处和高度的30%处。
           r: 渐变圆的半径，设置为画布宽度或高度的70%，即从圆心到边界的距离。
           fx, fy: 渐变焦点的位置，不同于圆心，设置为(30%, 70%)，这将创建一个偏移效果，使渐变看起来像是从不同的点扩散出来。
      -->
      
      <!-- 定义渐变的颜色停止点（stop）。颜色从蓝色逐渐过渡到绿色 -->
      <!-- 第一个颜色停止点位于渐变的起始位置（offset="0%"），颜色为蓝色（rgb(0,0,255)），不透明度为1（完全不透明） -->
      <stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
      
      <!-- 第二个颜色停止点位于渐变的结束位置（offset="100%"），颜色为绿色（rgb(0,255,0)），不透明度同样为1 -->
      <stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1" />
    </radialGradient>
  </defs>
  
  <!-- 在SVG画布上绘制一个椭圆形，并使用之前定义的放射性渐变填充 -->
  <!-- 属性解释：
       cx, cy: 椭圆中心的坐标，这里设置为(100, 100)，即画布的中心位置。
       rx, ry: 分别设置椭圆的水平半径和垂直半径，这里设置为90和60，使得椭圆更扁平。
       fill: 使用url()函数引用之前定义的渐变（grad2），作为椭圆的填充样式。
  -->
  <ellipse cx="100" cy="100" rx="90" ry="60" fill="url(#grad2)" />
</svg>

在这里插入图片描述

示例 3: 使用多个颜色停止点的放射性渐变

<!-- 创建一个200x200像素的SVG画布 -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- <defs>元素用于定义可以在SVG中重用的对象，例如渐变、图案或滤镜。这些对象不会直接渲染到画布上 -->
  <defs>
    <!-- 定义一个放射性（径向）渐变，并给它一个唯一的ID（grad3），以便在后续引用 -->
    <radialGradient id="grad3" cx="50%" cy="50%" r="50%">
      <!-- 属性解释：
           cx, cy: 渐变圆心的坐标，这里设置为(50%, 50%)，表示圆心位于画布的中心。
           r: 渐变圆的半径，设置为50%，即从圆心到边界的距离为画布宽度或高度的一半。
      -->
      
      <!-- 定义三个颜色停止点（stop），形成从红色到绿色再到蓝色的多色渐变 -->
      <!-- 第一个颜色停止点位于渐变的起始位置（offset="0%"），颜色为红色（rgb(255,0,0)），不透明度为1（完全不透明） -->
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      
      <!-- 第二个颜色停止点位于渐变的中间位置（offset="50%"），颜色为绿色（rgb(0,255,0)），不透明度同样为1 -->
      <stop offset="50%" style="stop-color:rgb(0,255,0);stop-opacity:1" />
      
      <!-- 第三个颜色停止点位于渐变的结束位置（offset="100%"），颜色为蓝色（rgb(0,0,255)），不透明度为1 -->
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  
  <!-- 在SVG画布上绘制一个矩形，并使用之前定义的放射性渐变填充 -->
  <!-- 属性解释：
       x, y: 矩形左上角的坐标，这里设置为(10, 10)，即矩形从距离画布左边界和上边界各10个单位的地方开始。
       width, height: 分别设置矩形的宽度和高度，这里设置为180个单位，使得矩形内部留有10个单位的空白边距。
       fill: 使用url()函数引用之前定义的渐变（grad3），作为矩形的填充样式。
  -->
  <rect x="10" y="10" width="180" height="180" fill="url(#grad3)" />
</svg>

在这里插入图片描述

示例 4: 渐变不透明度变化

<!-- 创建一个200x200像素的SVG画布 -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- <defs>元素用于定义可以在SVG中重用的对象，例如渐变、图案或滤镜。这些对象不会直接渲染到画布上 -->
  <defs>
    <!-- 定义一个放射性（径向）渐变，并给它一个唯一的ID（grad4），以便在后续引用 -->
    <radialGradient id="grad4" cx="50%" cy="50%" r="50%">
      <!-- 属性解释：
           cx, cy: 渐变圆心的坐标，这里设置为(50%, 50%)，表示圆心位于画布的中心。
           r: 渐变圆的半径，设置为50%，即从圆心到边界的距离为画布宽度或高度的一半。
      -->
      
      <!-- 定义两个颜色停止点（stop），形成一个从完全不透明到完全透明的红色渐变 -->
      <!-- 第一个颜色停止点位于渐变的起始位置（offset="0%"），颜色为红色（rgb(255,0,0)），不透明度为1（完全不透明） -->
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      
      <!-- 注意：第二个颜色停止点的颜色与第一个相同，但是不透明度设置为0（完全透明） -->
      <!-- 这将创建一个效果，使得渐变从中心开始是实色的红色，然后逐渐变为透明 -->
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:0" />
    </radialGradient>
  </defs>
  
  <!-- 在SVG画布上绘制一个圆形，并使用之前定义的放射性渐变填充 -->
  <!-- 属性解释：
       cx, cy: 圆心的坐标，这里设置为(100, 100)，即圆心位于画布的中心。
       r: 圆的半径，设置为90个单位，这样圆会占据大部分画布空间但仍然保持一些边缘空间。
       fill: 使用url()函数引用之前定义的渐变（grad4），作为圆形的填充样式。
  -->
  <circle cx="100" cy="100" r="90" fill="url(#grad4)" />
</svg>

在这里插入图片描述

以上四个示例展示了如何在SVG中使用<radialGradient>元素创建不同的放射性渐变效果。每个示例都包括了对关键属性的解释，并且通过不同的形状（圆形、椭圆形、矩形）应用这些渐变，以展示它们的视觉效果。希望这些示例能够满足你的需求。

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

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

相关文章

vue+node+mysql8.0，详细步骤及报错解决方案

vue+node+mysql8.0，详细步骤及报错解决方案

1.下载需要安装的插件 下载express npm install express下载cors&#xff0c;用于处理接口跨域问题 npm install cors下载mysql npm install mysql 2.配置服务器 可以在vue项目的src同级创建server文件夹&#xff08;这里的位置可随意选择&#xff09; 然后依次创建&#…
阅读更多...
相机雷达外参标定综述“Automatic targetless LiDAR–camera calibration: a survey“

相机雷达外参标定综述“Automatic targetless LiDAR–camera calibration: a survey“

相机雷达外参标定综述--Automatic targetless LiDAR–camera calibration: a survey 前言1 Introduction2 Background3 Automatic targetless LiDAR–camera calibration3.1 Information theory based method(信息论方法)3.1.1 Pairs of point cloud and image attributes(属性…
阅读更多...
Epic游戏使用mod

Epic游戏使用mod

以土豆兄弟为例&#xff1a; 第一步&#xff1a;获取 SteamCMD 下载官方 Steam 控制台客户端 (steamCMD) 1. 下载好后打开&#xff0c;是一个在 cmd 窗口的运行的命令行 2. 输入以下代码登录 login anonymous 第二步&#xff1a; 确认自己要下载的游戏 ID 和 mod ID 然后…
阅读更多...
EGO Swarm翻译

EGO Swarm翻译

目录 摘要 Ⅰ 介绍 Ⅱ 相关工作 A . 单四旋翼局部规划 B . 拓扑规划 C. 分布式无人机集群 Ⅲ 基于梯度的局部规划隐式拓扑轨迹生成 A.无需ESDF梯度的局部路径规划 B.隐式拓扑轨迹生成 Ⅳ 无人机集群导航 A 机间避碰 B. 定位漂移补偿 C. 从深度图像中去除agent Ⅴ …
阅读更多...
FFmpeg 框架简介和文件解复用

FFmpeg 框架简介和文件解复用

文章目录 ffmpeg框架简介libavformat库libavcodec库libavdevice库 复用&#xff08;muxers&#xff09;和解复用&#xff08;demuxers&#xff09;容器格式FLVScript Tag Data结构&#xff08;脚本类型、帧类型&#xff09;Audio Tag Data结构&#xff08;音频Tag&#xff09;V…
阅读更多...
基于LSTM长短期记忆神经网络的多分类预测【MATLAB】

基于LSTM长短期记忆神经网络的多分类预测【MATLAB】

在深度学习中&#xff0c;长短期记忆网络&#xff08;LSTM, Long Short-Term Memory&#xff09;是一种强大的循环神经网络&#xff08;RNN&#xff09;变体&#xff0c;专门为解决序列数据中的长距离依赖问题而设计。LSTM因其强大的记忆能力&#xff0c;广泛应用于自然语言处理…
阅读更多...
在Excel中如果制作可以自动填充的序号，删除或者合并单元也可用

在Excel中如果制作可以自动填充的序号，删除或者合并单元也可用

大家好&#xff0c;我是小鱼。在日常的办公中有时需要制作带序号的表格&#xff0c;这样可以通过序号来直观地看到有多少条信息&#xff0c;但是如果普通的批量添加序号的话&#xff0c;一旦我们删除或者合并某几行数据&#xff0c;前面的序号不会自动更新&#xff0c;序号显示…
阅读更多...
从ESP8266编程到树莓派Pico集成：实现手机APP控制LED灯

从ESP8266编程到树莓派Pico集成：实现手机APP控制LED灯

物联网（IoT）技术正广泛应用于智能家居领域，通过WiFi模块（如ESP8266）连接嵌入式开发板（如树莓派Pico），可实现设备远程控制。本文将从ESP8266模块的固件编程开始，直至其与树莓派Pico集成，完成通过手机APP远程控制LED灯的功能实现。 一、项目目标 通过手机APP与ESP8266…
阅读更多...
【机器学习】分而知变，积而见道：微积分中的世界之思

【机器学习】分而知变，积而见道：微积分中的世界之思

文章目录 微积分基础&#xff1a;理解变化与累积的数学前言一、微积分概述与基础概念1.1 微积分的定义与重要性1.1.1 微积分的基本组成1.1.2 微积分在机器学习中的应用 1.2 微积分的历史与发展 二、极限与连续性2.1 极限的定义与计算2.1.1 极限的直观理解2.1.2 极限的数学定义2…
阅读更多...
【嵌入式开发笔记】OpenOCD到嵌入式调试

【嵌入式开发笔记】OpenOCD到嵌入式调试

最近在把玩一块Risc-V的开发板&#xff0c;使用开发板调试时&#xff0c;需要用到专门的下载器和OpenOCD进行调试。 为了连接这个板子&#xff0c;费了九牛二虎之力。 这里简单记录一下自己的折腾经过吧。 0x00 环境准备 0x0001 调试背景 系统&#xff1a;Virtual Box Ub…
阅读更多...
知网研学 | 知网文献（CAJ+PDF）批量下载

知网研学 | 知网文献（CAJ+PDF）批量下载

知网文献&#xff08;CAJPDF&#xff09;批量下载 一、知网研学安装二、插件及脚本安装三、CAJ批量下载四、脚本下载及PDF批量下载浏览器取消拦截窗口 一、知网研学安装 批量下载知网文件&#xff0c;格式为es6文件&#xff0c;需使用知网研学软件打开&#xff0c;故需先安装该…
阅读更多...
ScottPlot学习的常用笔记-02

ScottPlot学习的常用笔记-02

ScottPlot学习的常用笔记-02 写在前面Why&Target&#xff1a;这里记一些杂项。上下文&背景 先记一下这几个小时的新收获先说一下&#xff0c;为什么可开发可视工具缩放的问题ScottPlot5.0起步.net Core: WinExe.Net Framework也是可以的 写在前面 Why&Target&…
阅读更多...
uniapp使用腾讯地图接口的时候提示此key每秒请求量已达到上限或者提示此key每日调用量已达到上限问题解决

uniapp使用腾讯地图接口的时候提示此key每秒请求量已达到上限或者提示此key每日调用量已达到上限问题解决

要在创建的key上添加配额 点击配额之后进入分配页面&#xff0c;分配完之后刷新uniapp就可以调用成功了。
阅读更多...
【Harmony Next】多个图文配合解释DevEco Studio工程中，如何配置App相关内容，一次解决多个问题？

【Harmony Next】多个图文配合解释DevEco Studio工程中，如何配置App相关内容，一次解决多个问题？

解决App配置相关问题列表 1、Harmony Next如何配置图标&#xff1f; 2、Harmony Next如何配置App名称&#xff1f; 3、Harmony Next如何配置版本号&#xff1f; 4、Harmony Next如何配置Bundle ID? 5、Harmony Next如何配置build号&#xff1f; 6、Harmony Next多语言配置在哪…
阅读更多...
vue3实现打印table订单表格

vue3实现打印table订单表格

废话少说&#xff0c;直接上代码&#xff01; /utils/commonFunction.ts 把数字转换成繁体中文封装函数 export default function () {// 把数字转换成繁体中文function convertCurrency(money: any) {//汉字的数字var cnNums new Array("零","壹",&quo…
阅读更多...
VSCode：Markdown插件安装使用 -- 最简洁的VSCode中Markdown插件安装使用

VSCode：Markdown插件安装使用 -- 最简洁的VSCode中Markdown插件安装使用

VSCode&#xff1a;Markdown插件安装使用 1.安装Marktext2.使用Marktext 本文&#xff0c;将在Visual Studio Code中&#xff0c;安装和使用Markdown插件&#xff0c;以Marktext插件为例。 1.安装Marktext 打开VSCode&#xff0c;侧边栏中找到扩展模块(或CtrlShiftX快捷键)&am…
阅读更多...
五十个网络安全学习项目——（九）无线网络安全分析

五十个网络安全学习项目——（九）无线网络安全分析

五十个网络安全学习项目——&#xff08;九&#xff09;无线网络安全分析 这个系列灵感来源是&#xff1a;50个网络安全项目创意&#xff1a;覆盖新手至专家级&#xff0c;本人打算把这些项目都做一遍&#xff0c;做好记录&#xff0c;也算是对自己的提升。 本文将对WAPI 协议…
阅读更多...
Sigrity System Explorer Snip Via Pattern From Layout模式从其它设计中截取过孔模型和仿真分析操作指导

Sigrity System Explorer Snip Via Pattern From Layout模式从其它设计中截取过孔模型和仿真分析操作指导

Sigrity System Explorer Snip Via Pattern From Layout模式从其它设计中截取过孔模型和仿真分析操作指导 Sigrity System Explorer Snip Via Pattern From Layout模式支持从其它设计中截取过孔模型用于仿真分析，同样以差分模板为例 具体操作如下 双击打开System Explorer软件…
阅读更多...
【Java基础面试题025】什么是Java的Integer缓存池？

【Java基础面试题025】什么是Java的Integer缓存池？

回答重点 Java的Integer缓存池&#xff08;Integer Cache&#xff09;是为了提升性能和节省内存。根据实践发现大部分的数据操作都集中在值比较小的范围&#xff0c;因此缓存这些对象可以减少内存分配和垃圾回收的负担&#xff0c;提升性能 在 -128到127范围内的Integer对象会…
阅读更多...
AI广告爆发元年，心动网络能否成下一个Applovin？

AI广告爆发元年，心动网络能否成下一个Applovin？

如果说2023年标志着AI大模型技术的崛起&#xff0c;那么2024年无疑是AI广告应用爆发的元年。 大洋彼岸的Applovin凭借着智能广告分发引擎完成彻底翻身&#xff0c;股价上涨超过30倍。一跃成为AI领域乃至整个美股市场的明星。 与此同时&#xff0c;心动网络作为同样深耕于游戏…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023