【canvas】canvas基础使用（二）：使用canvas路径绘制点、线、面

最新推荐文章于 2024-05-28 11:44:38 发布
最新推荐文章于 2024-05-28 11:44:38 发布
阅读量1.1k 收藏 9
点赞数 31
分类专栏： 前端 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43231248/article/details/137518798
版权

简言

学习canvas路径绘制点、线、面的api。

canvas路径

图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形需要一些额外的步骤。

  1. 首先，你需要创建路径起始点。
  2. 然后你使用画图命令去画出路径。
  3. 之后你把路径封闭。
  4. 一旦路径生成，你就能通过描边或填充路径区域来渲染图形。

canvas的路径有许多方法供使用。

beginPath 开始新子路径

CanvasRenderingContext2D.beginPath() 是 Canvas 2D API 通过清空子路径列表开始一个新路径的方法。当你想创建一个新的路径时，调用此方法。
示例：

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

// First path
ctx.beginPath();

stroke 绘制路径

CanvasRenderingContext2D.stroke() 是 Canvas 2D API 使用非零环绕规则，根据当前的画线样式，绘制当前或已经存在的路径的方法。

非零环绕规则是图形学中判断某个区域是在所属区域外面还是内部的一种规则。假设以一个点做射线，初始为0，与顺时针路径相交则+1，与逆时针路径相交则-1，最后相交点相加不为0，这个点则在路径内部，否则外部。

参数：
-path — 绘制的路径Path2D 。(可选的)

moveTo 将子路径起始点移到指定位置

CanvasRenderingContext2D.moveTo() 是 Canvas 2D API 将一个新的子路径的起始点移动到 (x，y) 坐标的方法。
语法：
void ctx.moveTo(x, y);
参数：

  • x — 点的 x 轴。
  • y — 点的 y 轴。

lineTo 使用直线连接新路径

CanvasRenderingContext2D.lineTo() 是 Canvas 2D API 使用直线连接子路径的终点到 x，y 坐标的方法（并不会真正地绘制）。
语法：
void ctx.lineTo(x, y);

  • x — 直线终点的 x 轴坐标。
  • y — 直线终点的 y 轴坐标。
    示例：
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.beginPath(); // Start a new path
ctx.moveTo(30, 50); // Move the pen to (30, 50)
ctx.lineTo(150, 100); // Draw a line to (150, 100)
ctx.stroke(); // Render the path

在这里插入图片描述

closePath 回到子路径起始点

CanvasRenderingContext2D.closePath() 是 Canvas 2D API 将笔点返回到当前子路径起始点的方法。它尝试从当前点到起始点绘制一条直线。如果图形已经是封闭的或者只有一个点，那么此方法不会做任何操作。

相当于lineTo(x,y),x,y是起始点坐标。

语法：
void ctx.closePath();
示例：
闭合三角形

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

ctx.beginPath();
ctx.moveTo(20, 140); // p1
ctx.lineTo(120, 10); // l1
ctx.lineTo(220, 140); // l2
ctx.closePath(); // l3
ctx.stroke();	// 绘制

在这里插入图片描述

arc 圆弧路径

CanvasRenderingContext2D.arc() 是 Canvas 2D API 绘制圆弧路径的方法。圆弧路径的圆心在 (x, y) 位置，半径为 r，根据anticlockwise （默认为顺时针）指定的方向从 startAngle 开始绘制，到 endAngle 结束。
语法：
void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
参数：

  • x — 圆弧中心（圆心）的 x 轴坐标。
  • y — 圆弧中心（圆心）的 y 轴坐标。
  • radius — 圆弧的半径。
  • startAngle — 圆弧的起始点，x 轴方向开始计算，单位以弧度表示。
  • endAngle ---- 圆弧的终点，单位以弧度表示。
  • anticlockwise — 可选的Boolean值，如果为 true，逆时针绘制圆弧，反之，顺时针绘制。

示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas1</title>
  <style>
    #canvas {
      border: 1px solid #000;
    }
  </style>
</head>

<body>
  <canvas id="canvas"></canvas>
  <script>
    const PI = Math.PI
    const cDom = document.getElementById("canvas")
    //  定义画布宽高
    cDom.width = 500
    cDom.height = 500
    const context = cDom.getContext("2d")

    // ctx.fillRect(0, 0, cDom.width, cDom.height)
    // cDom.addEventListener("click", (e) => {
    //   console.log(e.offsetX, e.offsetY, e)
    //   context.fillStyle = '#000'
    //   context.beginPath()
    //   context.arc(e.offsetX, e.offsetY, 1, 0, 2 * Math.PI)
    //   context.fill()

    // })
    drawSmile(context)
    function drawSmile (ctx) {
      ctx.beginPath()
      ctx.arc(200, 200, 100, 0, 2 * PI)
      ctx.stroke()
      ctx.beginPath()
      ctx.arc(160, 180, 10, 0, 2 * PI)
      ctx.stroke()
      ctx.beginPath()
      ctx.arc(240, 180, 10, 0, 2 * PI)
      ctx.stroke()
      ctx.beginPath()
      ctx.arc(200, 220, 30, PI, 2 * PI, true) //  逆时针路径
      ctx.stroke()

    }
  </script>
</body>

</html>

在这里插入图片描述

arcTo 两切线圆弧

CanvasRenderingContext2D.arcTo() 是 Canvas 2D API 根据控制点和半径绘制圆弧路径，使用当前的描点 (前一个 moveTo 或 lineTo 等函数的止点)。根据当前描点与给定的控制点 1 连接的直线，和控制点 1 与控制点 2 连接的直线，作为使用指定半径的圆的切线，画出两条切线之间的弧线路径。
语法：
void ctx.arcTo(x1, y1, x2, y2, radius);
参数：

  • x1 — 第一个控制点的 x 轴坐标。
  • y1 — 第一个控制点的 y 轴坐标。
  • x2 — 第二个控制点的 x 轴坐标。
  • y2 — 第二个控制点的 y 轴坐标。
  • radius — 圆弧的半径。
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.setLineDash([]);
ctx.beginPath();
ctx.moveTo(150, 20);
ctx.arcTo(150, 100, 50, 20, 30);
ctx.stroke();

ctx.fillStyle = "blue";
// base point
ctx.fillRect(150, 20, 10, 10);

ctx.fillStyle = "red";
// control point one
ctx.fillRect(150, 100, 10, 10);
// control point two
ctx.fillRect(50, 20, 10, 10);
//
ctx.setLineDash([5, 5]);
ctx.moveTo(150, 20);
ctx.lineTo(150, 100);
ctx.lineTo(50, 20);
ctx.stroke();
ctx.beginPath();
ctx.arc(120, 38, 30, 0, 2 * Math.PI);
ctx.stroke();

在这里插入图片描述

ellipse 椭圆路径

CanvasRenderingContext2D.ellipse() 是 Canvas 2D API 添加椭圆路径的方法。椭圆的圆心在（x,y）位置，半径分别是radiusX 和 radiusY，按照anticlockwise（默认顺时针）指定的方向，从 startAngle 开始绘制，到 endAngle 结束。
语法：
void ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
参数：

  • x — 椭圆圆心的 x 轴坐标。
  • y — 椭圆圆心的 y 轴坐标。
  • radiusX — 椭圆长轴的半径。
  • radiusY — 椭圆短轴的半径。
  • rotation — 椭圆的旋转角度，以弧度表示 (非角度度数)。
  • startAngle — 将要绘制的起始点角度，从 x 轴测量，以弧度表示 (非角度度数)。
  • endAngle — 椭圆将要绘制的结束点角度，以弧度表示 (非角度度数)。
  • anticlockwise — Boolean 选项，如果为 true，逆时针方向绘制椭圆（逆时针），反之顺时针方向绘制。默认false.
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Draw the ellipse
ctx.beginPath();
ctx.ellipse(100, 100, 50, 75, Math.PI / 4, 0, 2 * Math.PI);
ctx.stroke();

// Draw the ellipse's line of reflection
ctx.beginPath();
ctx.setLineDash([5, 5]);
ctx.moveTo(0, 200);
ctx.lineTo(200, 0);
ctx.stroke();

在这里插入图片描述

rect 矩形路径

CanvasRenderingContext2D.rect() 是 Canvas 2D API 创建矩形路径的方法，矩形的起点位置是 (x, y)，尺寸为 width 和 height。矩形的 4 个点通过直线连接，子路径做为闭合的标记，所以你可以填充或者描边矩形。
语法：
void ctx.rect(x, y, width, height);
参数：

  • x — 矩形起点的 x 轴坐标。
  • y — 矩形起点的 y 轴坐标。
  • width — 矩形的宽度。
  • height — 矩形的高度。

quadraticCurveTo 二次贝塞尔曲线路径

CanvasRenderingContext2D.quadraticCurveTo() 是 Canvas 2D API 新增二次贝塞尔曲线路径的方法。它需要 2 个点。第一个点是控制点，第二个点是终点。起始点是当前路径最新的点，当创建二次贝赛尔曲线之前，可以使用 moveTo() 方法进行改变。
语法：
void ctx.quadraticCurveTo(cpx, cpy, x, y);
参数：

  • cpx — 控制点的 x 轴坐标。
  • cpy — 控制点的 y 轴坐标。
  • x — 终点的 x 轴坐标。
  • y — 终点的 y 轴坐标。

示例：

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

// Quadratic Bézier curve
ctx.beginPath();
ctx.moveTo(50, 20);
ctx.quadraticCurveTo(230, 30, 50, 100);
ctx.stroke();

// Start and end points
ctx.fillStyle = "blue";
ctx.beginPath();
ctx.arc(50, 20, 5, 0, 2 * Math.PI); // Start point
ctx.arc(50, 100, 5, 0, 2 * Math.PI); // End point
ctx.fill();

// Control point
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(230, 30, 5, 0, 2 * Math.PI);
ctx.fill();

在这里插入图片描述

bezierCurveTo 三次贝塞尔路径

CanvasRenderingContext2D.bezierCurveTo() 是 Canvas 2D API 绘制三次贝赛尔曲线路径的方法。该方法需要三个点。第一、第二个点是控制点，第三个点是结束点。起始点是当前路径的最后一个点，绘制贝赛尔曲线前，可以通过调用 moveTo() 进行修改。
语法:
void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
参数:

  • cp1x — 第一个控制点的 x 轴坐标。

  • cp1y — 第一个控制点的 y 轴坐标。

  • cp2x — 第二个控制点的 x 轴坐标。

  • cp2y — 第二个控制点的 y 轴坐标。

  • x — 结束点的 x 轴坐标。

  • y — 结束点的 y 轴坐标。

示例：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(50, 20);
ctx.bezierCurveTo(230, 30, 150, 60, 50, 100);
ctx.stroke();

ctx.fillStyle = "blue";
// start point
ctx.fillRect(50, 20, 10, 10);
// end point
ctx.fillRect(50, 100, 10, 10);

ctx.fillStyle = "red";
// control point one
ctx.fillRect(230, 30, 10, 10);
// control point two
ctx.fillRect(150, 70, 10, 10);

在这里插入图片描述

fill 填充路径

CanvasRenderingContext2D.fill() 是 Canvas 2D API 根据当前的填充样式，填充当前或已存在的路径的方法。采取非零环绕或者奇偶环绕规则。
语法：
void ctx.fill();
void ctx.fill(fillRule);
void ctx.fill(path, fillRule);
参数：

  • fillRule — 一种算法，决定点是在路径内还是在路径外。 允许的值：nonzero非零环绕规则，默认的规则。evenodd 奇偶环绕规则。
  • path — 需要填充的Path2D 路径。
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.rect(10, 10, 150, 100);
ctx.fill();

在这里插入图片描述

clip 裁剪路径

CanvasRenderingContext2D.clip() 是 Canvas 2D API 将当前创建的路径设置为当前剪切路径的方法。
语法：
void ctx.clip();
void ctx.clip(fillRule);
void ctx.clip(path, fillRule);
参数：

  • fillRule — 这个算法判断一个点是在路径内还是在路径外。 允许的值：nonzero非零环绕原则，默认的原则。evenodd奇偶环绕原则。
  • path — 需要剪切的 Path2D 路径。

示例：

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

// Create circular clipping region
ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.clip();

// Draw stuff that gets clipped
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "orange";
ctx.fillRect(0, 0, 100, 100);

在这里插入图片描述

绘制点

一个点可看作一个半径为1px的圆或者矩形，然后填充路径。

  const PI = Math.PI
    const cDom = document.getElementById("canvas")
    //  定义画布宽高
    cDom.width = 500
    cDom.height = 500
    const context = cDom.getContext("2d")

   
    cDom.addEventListener("click", (e) => {
      console.log(e.offsetX, e.offsetY, e)
      context.fillStyle = '#000'
      context.beginPath()
      context.arc(e.offsetX, e.offsetY, 1, 0, 2 * Math.PI)
      context.fill()

    })

在这里插入图片描述

绘制线

线有直线、曲线和闭合的曲线等，可以使用lineTo、rect、arc等上面的方法，然后使用stroke方法绘制路径。

绘制面

绘制面主要是使用fill方法来填充路径，显示绘制成面的效果。

  const PI = Math.PI
    const cDom = document.getElementById("canvas")
    //  定义画布宽高
    cDom.width = 500
    cDom.height = 500
    const context = cDom.getContext("2d")

    // context.fillRect(0, 0, cDom.width, cDom.height)
    cDom.addEventListener("click", (e) => {
      console.log(e.offsetX, e.offsetY, e)
      context.fillStyle = '#000'
      context.beginPath()
      context.arc(e.offsetX, e.offsetY, 10, 0, 2 * Math.PI)
      context.fill()

    })

在这里插入图片描述

结语

结束了。

ZSK6
关注
  • 31
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
使用canvas绘制水滴（二次贝塞尔曲线、圆弧）
caoxinjian423的博客
11-04 1490
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用canvas绘制水滴</title> <style> html{height: 100%;overflow: hidden} body{height: 100%;margin: 0;} #canvas{ .
微信小程序学习用demo：使用canvas绘制雷达图
03-15
免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。
canvas：理解canvas / 基础使用 / 实用demo
snowball的博客
10-30 1825
Canvas是一个HTML5元素，用于在Web页面上绘制2D或3D图形。它允许使用JavaScript在网页上创建和操作图形。Canvas的主要功能是绘图，但也可以用来实现其他功能，如动画和交互式游戏。
web canvas系列——快速入门上手绘制二维空间点、线、面
热门推荐
编程知识分享，主打前端
03-17 1万+
大家好，我是yma16，本文分享web canvas系列——快速入门画二维点、线、面。前端canvas前端中的Canvas是HTML5中新增的一个元素，它允许我们直接通过JavaScript来绘制图形、动画和其他可视化效果。Canvas提供了一个画布，我们可以在上面绘制各种形状、图像和文本。使用上下文对象绘制图形、图像和文本。Canvas的绘图上下文提供了一系列的绘制方法，如绘制矩形、圆形、线条等。可以通过设置上下文的属性，如颜色、线宽等来调整绘制效果。
canvas绘制折线路径动画
netcy的专栏
05-09 1389
最近有读者加我微信咨询这个问题： 其中的效果是一个折线路径动画效果，如下图所示： 要实现以上路径动画，一般可以使用svg的动画功能。或者使用canvas绘制，结合路径数学计算来实现。 如果用canvas来绘制，其中的难点在于： 需要计算子路径，这块计算比较复杂。（当然是可以实现的） 渐变的计算， 从图中可以看出，动画的子路径是有渐变效果的，如果要分段计算渐变也很复杂。 本文介绍一种思路，使用clip方法，动态移动clip的区域，来达到近似的效果。具体怎么做。 绘制灰色路径 绘制路径的代码比较简单，此
说说如何使用 Canvas 绘制弧线与曲线
读万卷书，行万里路
08-02 4196
绘制弧线前，我们需要先了解角度与弧度的概念。 1 角度与弧度 （1）角度 两条射线从圆心向圆周射出，形成一个夹角和夹角正对的一段弧。当弧长正好等于圆周长的 360 分之一时，两条射线的夹角的大小为1度 。( 单位 :º ） （2）弧度 两条射线从圆心向圆周射出，形成一个夹角和夹角正对的一段弧。当这段弧长正好等于圆的半径时，两条射线的夹角大小为1弧度（单位：rad)。具体计算公式为： rad 即弧度单词 radian 的缩写。 角度转换为弧度，推导与计算公式为： 2 弧线 弧线可以是圆，也可以是圆的
Canvas——路径绘制
mantou_riji的博客
01-13 1484
原因：因为绘制好空心长方形之后没有 ”抬笔“ ，就会认为空心长方形和后面绘制的长方形是一个图案，填充的时候就会一起填充。canvas最重要的就是画笔，可以通过画笔上的属性和方法绘制出不同样式的各种图形。，使用path2D创造出路径之后，直接在路径上进行画画。canvas就是一个画板，可以使用canvas在页面上画出想要的图形。fill的原理：取画笔的起点和终点进行连接，形成闭合图形再进行填充。绘制原理：三点一半径进行圆弧绘制。canvas是一个画板，我们可以在画板上绘制。就可以进行图像的绘制。
canvas02:使用canvas绘制一条直线
蜡笔love小新的博客
04-15 2434
在canvas01中，我们创建了一个简单的canvas案例，现在我们在canvas中绘制一条直线。 步骤： 1.定义canvas工具 2.设置起始点坐标x,y （moveTo(x,y)） 3.移动到结束点x1,y1 （lineTo(x1,y1)） 4.设置直线宽度（strokeWidth = '5'可选，默认1px） 5.设置直线颜色（strokeStyle = ...
在js中，使用canvas绘制渐变色线条
王二哥的博客
04-08 5063
效果 代码 注：看注释 var colors = ['#6bfae1' ,'#63b9e9' ,'red' ,'yellow' ,'blue', 'green']; var ctx = canvas.getContext('2d'); ctx.moveTo(50, 300); ctx.lineTo(700, 300); ctx.lineTo(750, 200); ctx.lineTo(780, 150);
Canvas入门，点，线，多边形的绘制。
qq_45549336的博客
06-11 2287
一、canvas简介 Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JS操作的位图（bitmap）。Canvas 对象表示一个HTML画布元素。它没有自己的行为，但是定义了一个API支持脚本化客户端绘图操作 二、Canvas基础入门 说明：看代码注释！！！看代码注释！！！看代码注释！！！ 1、使用入口 必须指定画布的id，width与height是画布宽高，不赋值时候，有默认值。 <canvas id="tutorial"
Python中Tkinter模块的Canvas控件使用学习（1：基本用法）
gc_2299的博客
08-26 2124
结合参考文献，学习了Tkinter模块中Canvas控件的最基本用法
使用canvas绘制贝塞尔曲线
12-14
二次方贝兹曲线的路径由给定点P0、P1、P2的函数B（t）追踪： 代码实例： 复制代码代码如下:<!DOCTYPE html><html><head><meta charset=”utf-8″><title>canvas直线</title><...
Vue使用Canvas绘制图片、矩形、线条、文字，下载图片
10-17
主要介绍了Vue使用Canvas绘制图片、矩形、线条、文字，下载图片的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
xmind_canvas_draw:使用html5的canvas绘制xmind
05-09
##用js解析xmind，用canvas绘制出来1.解压.xmind后缀的文件，本质上是个zip的压缩包，得到content.xml2.在xmind的程序中找到markers的资源包，xmind似乎是个eclipse定制的程序3.firefox打开xmind.htmlxmind demo ...
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
最新发布
JIngJaneIL的博客
05-28 645
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
【详细介绍WebKit的结构】
cz88888888666的博客
05-23 578
WebKit是一个开源的浏览器引擎，主要用于渲染网页内容，它最初由苹果公司为其Safari浏览器开发，目前被多种浏览器和应用程序使用，包括所有基于iOS和macOS的浏览器，WebKit的设计目标是提供快速、精准且流畅的网页浏览体验。
超详细的前后端实战项目（Spring系列加上vue3）前端篇（二）（一步步实现+源码）
2301_79969279的博客
05-24 1112
好了，兄弟们，继昨天的项目之后，开始继续敲前端代码，完成前端部分昨天完成了全局页面的代码，和登录页面的代码，不过昨天的代码还有一些需要补充的，这里添加一下。
vue 使用 export default
global_coding的博客
05-24 346
vue 使用 export default
微信小程序使用canvas绘制一条线
06-02
可以使用微信小程序的Canvas API来绘制一条线。以下是一个简单的示例代码： 1. 在wxml文件中添加canvas标签： ```html <canvas canvas-id="myCanvas"></canvas> ``` 2. 在js文件中获取canvas对象并使用API绘制一条线： ```javascript Page({ onReady: function () { // 获取canvas对象 var context = wx.createCanvasContext('myCanvas') // 绘制一条线 context.beginPath() context.moveTo(50, 50) context.lineTo(250, 50) context.setStrokeStyle('red') context.stroke() context.closePath() // 绘制完成后需要调用draw方法将绘制结果显示在canvas上 context.draw() } }) ``` 这段代码会在canvas中绘制一条红色的直线，起点坐标为(50, 50)，终点坐标为(250, 50)。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ZSK6

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值