html画布入门笔记

最新推荐文章于 2021-09-12 16:36:29 发布
最新推荐文章于 2021-09-12 16:36:29 发布
阅读量396 收藏 4
点赞数 1
文章标签： html canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44758643/article/details/108638051
版权

canvas

<canvas>元素

<canvas id="tutorial" width="150" height="150"></canvas>

<canvas>元素只有两个属性，width和height。这些都是可选的，也可以使用DOM 属性设置。如果未指定no width和height属性，则画布最初将为300像素宽和150像素高。可以通过CSS任意调整元素的大小

渲染上下文

素创建一个固定大小的绘图表面暴露一个或多个渲染上下文，其被用于创建和操纵所示的内容

getContext()，用于获得呈现上下文和它的绘制功能。getContext()采用一个参数，即上下文的类型。对于2D图形（例如本教程介绍的图形

语法：

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

浏览器兼容性

通过简单地测试getContext()方法的存在来以编程方式检查支持

var canvas = document.getElementById('tutorial');

if (canvas.getContext) {
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

小案例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
      function draw() {
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext) {
          var ctx = canvas.getContext('2d');
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>

通过侦听load文档上的事件来完成的。这个功能，或者一个喜欢它，也可以使用所谓的window.setTimeout()，window.setInterval()或任何其他事件处理程序，只要页面已经被第一次加载。

绘制两个相交的矩形，其中一个具有alpha透明度。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <script type="application/javascript">
    function draw() {
      var canvas = document.getElementById('canvas');
      if (canvas.getContext) {
        var ctx = canvas.getContext('2d');

        ctx.fillStyle = 'rgb(200, 0, 0)';
        ctx.fillRect(10, 10, 50, 50);

        ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
        ctx.fillRect(30, 30, 50, 50);
      }
    }
  </script>
 </head>
 <body onload="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>
 </body>
</html>

网格

可以吧canvas元素看成指定的片区域把区域内看成有网格左上到右上文x轴

左上到左下为y轴（x，y）；如此表示坐标

在这里插入图片描述

绘制矩形的三个函数

``仅支持两种基本形状：矩形和路径（由线连接的点的列表）。所有其他形状必须通过组合一个或多个路径来创建。

fillRect(x, y, width, height)

绘制一个填充的矩形。

strokeRect(x, y, width, height)

绘制矩形轮廓。

clearRect(x, y, width, height)

清除指定的矩形区域，使其完全透明。

x并y指定矩形左上角在画布上的位置（相对于原点）。width并height提供矩形的大小。

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}

绘制路径

路径是由线段连接的点的列表，这些线段可以具有不同的形状（弯曲或不弯曲），不同的宽度和不同的颜色。路径甚至子路径都可以关闭

**思路过程 **

  1. 首先，创建路径。
  2. 然后，您可以使用[绘图命令]来绘制路径。
  3. 创建路径后，您可以描画或填充路径以进行渲染。

操作步骤方法

  • beginPath()

    创建一个新路径。创建之后，将来的绘图命令将直接进入路径并用于构建路径。

    路径方法

    语法：

    void ctx.beginPath();
    • 例子

    创建两个路径

    再开始前调用beginPath()方法

    <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
   
</head>

<body onload="draw();">
    <canvas id="canvas" width="150" height="150"></canvas>
</body>
<script type="application/javascript">
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    // First path
    ctx.beginPath();
    ctx.strokeStyle = 'blue';
    ctx.moveTo(20, 20);
    ctx.lineTo(200, 20);
    ctx.stroke();

    // Second path
    ctx.beginPath();
    ctx.strokeStyle = 'green';
    ctx.moveTo(20, 20);
    ctx.lineTo(120, 120);
    ctx.stroke();
</script>
</html>

    结果：

    在这里插入图片描述

    为对象设置不同路径的方法。

  • closePath()

    尝试从当前点到当前子路径的起点添加一条直线。如果形状已经闭合或只有一个点，则此功能不执行任何操作。此方法不会直接在画布上绘制任何内容

    向路径添加一条直线，转到当前子路径的起点。

    • 例子

      <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
   
</head>

<body onload="draw();">
    <canvas id="canvas" width="400" height="400"></canvas>
</body>
 <script type="application/javascript">
  const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(20, 140);  
ctx.lineTo(120, 10);   
ctx.lineTo(220, 140);  
ctx.closePath();       
ctx.stroke();
    </script>
</html>

    此例子中closePath()方法创建三角形的底面，该方法会自动连接形状的第一个点和最后一个点。

    结果如图：

在这里插入图片描述

​ * 第二个案例：

​

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
   
</head>

<body onload="draw();">
    <canvas id="canvas" width="400" height="400"></canvas>
</body>
 <script type="application/javascript">
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(240, 20, 40, 0, Math.PI);
ctx.moveTo(100, 20);
ctx.arc(60, 20, 40, 0, Math.PI);
ctx.moveTo(215, 80);
ctx.arc(150, 80, 65, 0, Math.PI);
ctx.closePath();
ctx.lineWidth = 6;
ctx.stroke();
    </script>
</html>

结果：

在这里插入图片描述

stroke()

通过抚摸轮廓来绘制形状。stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。

fill()

​ 填充图形

通过填充路径的内容区域绘制实体形状。

语法：

void ctx.fill([fillRule]);
void ctx.fill(path [, fillRule]);

  • fillRule

    • ​ “nonzero”：非零缠绕规则。默认规则。
    • **"evenodd"：奇数缠绕规则。

  • path

    • Path2D填补的道路。
    • ​ 例子

    填充矩形本示例使用该fill()方法填充矩形。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
   
</head>

<body onload="draw();">
    <canvas id="canvas" width="400" height="400"></canvas>
</body>
 <script type="application/javascript">
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.rect(10, 10, 150, 100);

ctx.fill();
    </script>
</html>

运行结果：

在这里插入图片描述

具体步骤

第一步：

调用beginPath()。在内部，路径存储为一起形成形状的子路径（线，弧等）的列表。每次调用此方法时，列表都会重置，我们可以开始绘制新形

第二步：

调用实际指定要绘制路径的方法

第三步：

（可选步骤）是closePath()。此方法尝试通过绘制从当前点到起点的直线来闭合形状。如果形状已经关闭或列表中只有一个点，则此功能不执行任何操作。

画一个三角形：

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}

移动笔

该功能是一个会成为上述路径列表的一部分moveTo()您可能最能想到的是将笔或铅笔从一张纸上的一个位置提起，然后放在另一张纸上。

moveTo(x, y)

移动笔由指定的坐标x和y。

初始化或beginPath()调用画布时，通常将需要使用该moveTo()函数将起点放置在其他位置。我们还可以moveTo()用来绘制未连接的路径。看看下面的笑脸。

  
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
   
</head>

<body onload="draw();">
    <canvas id="canvas" width="400" height="400"></canvas>
</body>
 <script type="application/javascript">
function draw() {
    var canvas = document.getElementById('canvas');
    if (canvas.getContext) {
       var ctx = canvas.getContext('2d');
  
      ctx.beginPath();
      ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
      ctx.moveTo(110, 75);
      ctx.arc(75, 75, 35, 0, Math.PI, false);  // Mouth (clockwise)
      ctx.moveTo(65, 65);
      ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // Left eye
      ctx.moveTo(95, 65);
      ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // Right eye
      ctx.stroke();
    }
  }
    </script>
</html>

运行结果：

在这里插入图片描述

线数

lineTo()方法来绘制直线

lineTo(x, y)

绘制一条从当前绘图位置到所指定的位置的线x和y。

案例：

绘制两个三角形一个实心的一个空心的

  
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
   
</head>

<body onload="draw();">
    <canvas id="canvas" width="400" height="400"></canvas>
</body>
 <script type="application/javascript">
function draw() {
   var canvas=document.getElementById('canvas');
   if(canvas.getContext){
     var ctx=canvas.getContext('2d');
     //绘制实心的
     ctx.beginPath();
     ctx.moveTo(25,25)
     ctx.lineTo(105,25);
     ctx.lineTo(25,105);
      // 绘制实心的
     ctx.fill();

     //绘制空心的
     ctx.beginPath();
    ctx.moveTo(125, 125);
    ctx.lineTo(125, 45);
    ctx.lineTo(45, 125);
    // 连接起始点
    ctx.closePath();
    //绘制形状
    ctx.stroke();
   }
  }
    </script>
</html>

效果如下：

在这里插入图片描述

弧线

要绘制圆弧或圆，我们使用arc()或arcTo()方法。

语法：

void ctx.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);

该arc()方法创建一个以(x, y)半径为中心的圆弧。路径从开始于，在结束于，并按照给出的方向（默认为顺时针）行进

  • 参量

    x

    圆弧中心的水平坐标

    y

    圆弧中心的垂直坐标。

    radius

    圆弧的半径。必须是积极的。

    startAngle

    从正x轴开始测量的弧度起始弧度的角度（以弧度表示）。

    endAngle

    从正x轴开始测量，弧结束的弧度角（以弧度表示）

    anticlockwise 可选的

    可选的Boolean。如果为true，则在起始角度和终止角度之间逆时针绘制圆弧。默认值为false（顺时针）。

  • 例子

    画一个完整的圆

      
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
   
</head>

<body onload="draw();">
    <canvas id="canvas" width="400" height="400"></canvas>
</body>
 <script type="application/javascript">
function draw() {
    const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
  }
    </script>
</html>

    在这里插入图片描述

贝塞尔曲线和二次曲线

贝塞尔曲线大概就是ps中钢笔工具那个曲线

quadraticCurveTo(cp1x, cp1y, x, y)

从当前笔位置到由指定的结束点绘制的二次贝塞尔曲线x，并y使用由指定的控制点cp1x和cp1y。

在这里插入图片描述

例子：

此示例显示了如何绘制二次贝塞尔曲线。

  
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
   
</head>

<body onload="draw();">
    <canvas id="canvas" width="400" height="400"></canvas>
</body>
 <script type="application/javascript">
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

//贝塞尔曲线
ctx.beginPath();
ctx.moveTo(50, 20);
ctx.quadraticCurveTo(230, 30, 50, 100);
ctx.stroke();

// 起点和终点
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.arc(50, 20, 5, 0, 2 * Math.PI);   //起始点
ctx.arc(50, 100, 5, 0, 2 * Math.PI);  // 终点
ctx.fill();

// 控制点
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(230, 30, 5, 0, 2 * Math.PI);
ctx.fill();
    </script>
</html>

运行结果：

在这里插入图片描述

二次贝塞尔曲线

语法：

void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);


cp1x

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

cp1y

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

cp2x

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

cp2y

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

x

终点的x轴坐标。

y

终点的y轴坐标。

案例：

绘制一个三次贝塞尔曲线

  
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
   
</head>

<body onload="draw();">
    <canvas id="canvas" width="400" height="400"></canvas>
</body>
 <script type="application/javascript">
//定义画布和上下文
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 将点定义为{x，y}
let start = { x: 50,    y: 20  };
let cp1 =   { x: 230,   y: 30  };
let cp2 =   { x: 150,   y: 80  };
let end =   { x: 250,   y: 100 };

// 三次贝塞尔曲线
ctx.beginPath();
ctx.moveTo(start.x, start.y);
ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);
ctx.stroke();

// 起始点和终止点
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.arc(start.x, start.y, 5, 0, 2 * Math.PI);  // 起始点
ctx.arc(end.x, end.y, 5, 0, 2 * Math.PI);      // 终止点
ctx.fill();

// 控制点
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(cp1.x, cp1.y, 5, 0, 2 * Math.PI);  // 控制点一
ctx.arc(cp2.x, cp2.y, 5, 0, 2 * Math.PI);  // 控制点二
ctx.fill();
    </script>
</html>

结果

在这里插入图片描述

案例二：

渲染语音气球

  
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
   
</head>

<body onload="draw();">
    <canvas id="canvas" width="400" height="400"></canvas>
</body>
 <script type="application/javascript">
function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    // 二次贝塞尔曲线案例
    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();
  }
}
    </script>
</html>

效果

在这里插入图片描述

长方形

rect(x, y, width, height)

绘制一个矩形，其左上角由（x，y）指定，width并带有指定的和height。

在执行此方法之前，将moveTo()使用参数（x，y）自动调用该方法。换句话说，当前笔位置会自动重置为默认坐标。

努力的豌豆芽
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
html+css入门学习笔记
01-24
本入门学习笔记将帮助初学者理解这两门技术的基本概念，逐步掌握创建动态、美观网页的方法。 HTML是用于创建网页内容的语言，它通过一系列标签来定义网页的各个部分，如标题、段落、图片、链接等。在HTML5中，新增...
three基础入门笔记1
08-04
- **Canvas标签**：HTML5的Canvas元素作为3D渲染的画布，three.js在其中绘制3D图像。 - **渲染器(Renderer)**：负责将场景、相机和光照组合起来，并将其呈现在Canvas上。在three.js中，你可以选择不同的渲染器，如...
【Canvas简易画布制作笔记】
a108776623的博客
12-17 150
JS增加类的样式：ID.classList.add('className') CSS SVG fill context.fillStyle = 'black' transform: scale(1.2) JS设置默认样式 context.clearRect(0, 0, yyy.width, yyy.height) var yyy = document.g...
HTML基础——图像与多媒体文件（二）
JEYMING的博客
05-11 473
&lt;!-- 图像与多媒体文件 图像、滚动文字、背景音乐等多媒体文件在HTML使用的方法 2018.01.06 --&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;图像与多媒体文件&lt;/title&gt;
HTML基础_iframe与多媒体_交互标记
weixin_45460315的博客
10-11 205
1.浮动框架标签 <iframe width="300px" height="300px" src="HTMLDome01.html" name="ff"></iframe> 属性 width 宽度与 height 高度 name与target配合使用 确定显示的位置 2.多媒体标记_视频标签 <embed...
HTML基础___图像和多媒体元素 <第五天>
weixin_34072458的博客
06-18 163
学习内容: 1.添加图像 _____img 2.设置图像属性_____width_ height_ border_ hspace_ vspace_ algin_ alt 3.图像的超链接_____a herf 4.设置动太文字_____marquee_direction_behavior_loop_scrollamount_scrolldelay_bgcolor_wi...
HTML的笔记及展示（3）（绘图和多媒体支持相关）
鄙人kunzhi96，感恩遇见！
01-02 321
实际应用中，我们使用HTML来完成绘图和多媒体相关功能不是很常用，所以只要知道，需要用时查阅使用即可。 一、绘图 &amp;lt;canvas…/&amp;gt;元素只是绘制图形的容器，必须使用JavaScript脚本来绘制图形。 示例： &amp;lt;canvas id=&quot;mc&quot; width=&quot;300&quot; height=&quot;180&quot; style=&quo
Canvas入门教程笔记
03-12
Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。 Canvas 对象表示一个 HTML 画布元素 -。它没有自己的行为，但是...
HTML笔记,html零基础入门视频课程（最适合初学者的教程）
04-24
本教程“HTML笔记,html零基础入门视频课程”是为初学者设计的一套系统学习资源，旨在帮助新手快速掌握HTML的基本概念和实际应用。 一、HTML基本结构 HTML文档由一系列的元素组成，这些元素通过标签来定义。每个HTML...
html 学习笔记
02-01
这个"html 学习笔记"压缩包包含了作者在学习HTML过程中的积累和理解，对于初学者来说是一份非常宝贵的资源。下面我们将深入探讨HTML的基础知识、结构以及一些重要的标签和概念。 HTML的基础知识： 1. HTML文档结构...
HTML5 在canvas中绘制矩形附效果图
09-28
可以使用绘图环境的矩形绘制函数来绘制矩形fillRect为绘制一个实心的矩形；strokeRect为绘制一个空心的矩形；clearRect为清除指定的矩形区域，使之完全透明，示例代码如下
HTML的基础知识及（页面、多媒体、表格）标签
qq_52253798的博客
09-12 197
1、HTML： 什么是HTML？ 网络协议 hypertext markup language：超文本标记语言 2、环境准备 开发环境： |-- sublime、VScode、editplus |-- IDE：hbuilder、webstorm 运行环境 |-- 浏览器即可（Chrome）3、HT ML的注释 <!-- 注释 --> 4、常见页面标签 p ...
html的画布的特点,HTML5教程：画布Canvas基础知识讲解
weixin_31520593的博客
06-04 149
HTML5教程：画布Canvas基础知识讲解Canvas是HTML5最让人期待的特性之一，目前已获得大部分Web浏览器支持Canvas可以帮助创建游戏、增强图形用户界面。下面YJBYS小编为大家带来画布Canvas基础知识，希望对大家学习有所帮助!HTML5规范引进了很多新特性，其中最令人期待的之一就是Canvas元素。HTML5 Canvas提供了通过JavaScript绘制图形的方法，此方法使...
《HTML 画布》
yexiangCSDN的专栏
06-19 394
HTML5<canvas>参考手册 描述 HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。 不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。 getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。 本手册提供完整...
HTML5画布基本和高级教程！
刘佳悦谈谈编程
01-10 938
第1部分:HTML5画布基本教程介绍 欢迎来到基本教程!在这些教程,我们将专注于HTML5画布的基本绘图功能,包括直线和曲线绘制,路径图,绘制形状,渐变模式,图像和文本。 HTML5画布基本教程先决条件 你需要开始使用Google Chrome等基本教程是一个现代的浏览器,Firefox,Safari,歌剧,或IE9,JavaScript的良好的工作知识,一个简单的文本编辑器就像记事
HTML学习笔记之第七章：HTML多媒体
永不止步
02-10 650
前言：关于本章节的内容，并非全部是个人原创，只是在学习中的总结笔记。难免有与其他学习网站或者博客相同之处，如有类同，各位大神莫怪!!!此资料只是用来学习和工作的参考，并不作为商业用途。希望与大家一起分享，共同进步!!!第七章：HTML多媒体1.什么是多媒体？多媒体来自多种不同的格式。它可以是您听到或看到的任何内容，文字、图片、音乐、音效、录音、电影、动画等等。不同的浏览器以不同的方式处理对音效、动...
html中加画布,HTML画布
weixin_42514890的博客
05-31 313
HTML画布 TutorialYour browser does not support the element.The HTML element is used to draw graphics on a web page.The graphic above is created with .It shows four elements: a red rectangle, a gradien...
canvas笔记--Path2D篇
qq_44758643的博客
09-23 2913
Path2D对象 Path2() Path2()可使用最新版本的浏览器中的对象来缓存或记录这些绘图命令。您可以快速播放路径。 Path2D()构建函数返回一个新实例化的Path2D对象任意的与另一条路径作为参数（创建一个副本）或任选的用有一串svg路径数据 new Path2D(); //空路径对象 new Path2D(path); // 从另一个Path2D对象复制 new Path2D(d); // SVG路径数据中的路径 实例演示： 创建一个矩形和一个圆两者存储为path2D对象，以
3、canvas的Path2D对像
weixin_34050389的博客
07-11 1290
2019独角兽企业重金招聘Python工程师标准>>> ...
html 画布 写字
最新发布
09-22
您可以使用 HTML5 的 `<canvas>` 标签来在画布上写字。下面是一个简单的示例代码： ```html <!DOCTYPE html> <html> <title>HTML Canvas 写字 <canvas id="myCanvas" width="400" height="200"></canvas> ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值