HTML5 canvas 在线画笔绘图工具（二）

最新推荐文章于 2024-08-09 07:31:02 发布
最新推荐文章于 2024-08-09 07:31:02 发布
阅读量4.2k 收藏 3
点赞数
分类专栏： 技术博客 文章标签： 2d html5 javascript online paint canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gongztpm/article/details/43940709
版权


Canvas+Javascript 带图标的工具条制作 TToolbar


工具条是由一个TToolbar对象和两个按钮对象（TImageButton、TColorButton）组成，因为之前我大部分时间是使用ｄ.ｅ.ｌ.ｐ.ｈ.ｉ进行开发，所以命名方面比较偏向于ｄ.ｅ.ｌ.ｐ.ｈ.ｉ的风格，请处女座的同学忍耐将就一下。


图标按钮 TImageButton


TImageButton 是一个图标按钮对象,可以设置三个图标文件,分别是正常状态,鼠标移上状态,鼠标点击状态。


下面我们介绍一下TImageButton的参数：

 

Command是按钮对应的功能编号,比如我们定义1为直线,2为矩形.

NormalSrc, MouseOnSrc, MouseDownSrc 分别为正常状态,鼠标移上状态,鼠标点击状态 的图标地址。

x, y, width, height 按钮在工具条上的位置和尺寸。

Toolbar 为宿主工具条。

Group 是按钮所属分组。

function TImageButton(Command,
                      NormalSrc,
                      MouseOnSrc,
                      MouseDownSrc,
                      x,
                      y,
                      width,
                      height,
                      Toolbar,
                      group)
{
}


下面为在Canvas上绘制按钮图标的代码

当鼠标移进按钮或鼠标移出按钮时,将调用ChangeState来改变按钮的状态.为按钮设置不同的图标属性,然后通过Clear()函数将原来的图素清除,再利用RenderImage函数绘制新的按钮。


	function Clear() {
		Context.clearRect(Toolbar.x + x, Toolbar.y + y, width, height);
	}

	function LoadImage(newsrc) {

		image.src = newsrc;

		if (image.complete) {
			RenderImage(image);
		} else
			image.onload = function() {
				RenderImage(image);
			};
	}

	function RenderImage(image) {

		Context.drawImage(image, Toolbar.x + x, Toolbar.y + y, width, height);
	}

	function ChangeState(NewState) {

		state = NewState;
		Clear();
		if (NewState == CSN)
			LoadImage(NormalSrc);
		else if (NewState == CSO)
			LoadImage(MouseOnSrc);
		else if (NewState == CSD)
			LoadImage(MouseDownSrc);
	}


PointIn函数用于检测鼠标所在位置是否在当前按钮所覆盖区域中。

注意这里的AbsX与AbsY函数，由于鼠标的x值和y值是鼠标在页面中的坐标，而当前TImageButton对象的x,y是其在TToolbar对象中的坐标位置。因此我们在计算该TImageButton所覆盖区域时，应当加上画布在页中的坐标以及TToolbar对象在画布中的偏移量。



</pre><pre class="javascript" name="code">    function PointIn (testx,testy)
    {
       if ((testx>Absx())&&(testx<(Absx()+width))
          &&(testy>Absy()) && (testy<(Absy()+height)))
         {
   
              return true;
              
              }
          else
             return false; 
              
    }; 

function Absx() {
		return Canvas.offsetLeft + Toolbar.x + x;
	};
function Absy() {

		return Canvas.offsetTop + Toolbar.y + y;
	};


颜色选择按钮TColorButton

从下面TColorButton对象的建立参数我们可以看到，它与TImageButton基本类似，按照面向对象的法则，应当抽取一个基类，由两个TColorButton和TImageButton来继承。但我还没有学会如何在Javascript中实现对类的继承，所以暂时将它们分成两个完全不相干的类。

注意一下这个建立函数与TImageButton的唯一区别是它的Command参数不再是保存命令的编号，而是保存颜色的值。


function TColorButton(Command,
                      x,
                      y,
                      width,
                      height,
                      Toolbar,
                      group)
{
</pre><pre class="javascript" name="code">}


我们再来看看它的按钮是如何绘制到画布上的

TColorButton同样有 mousemoveon,mouseleave,click三种状态。当鼠标在按钮上时在颜色选择小框外画一个淡黄色的小框。


function Clear()
    {
       Context.clearRect(Toolbar.x+ x,Toolbar.y+ y,width,height);
    }
    function RenderButton()
    {
       
       Context.fillStyle=command;
       Context.fillRect(Toolbar.x+ x, Toolbar.y+ y,width,height);
       if (state==CSO)
       {
       	  Context.strokeStyle="#FFCC33";
		  Context.lineWidth=2;
		  Context.strokeRect(Toolbar.x+ x+2, Toolbar.y+ y+2,width-4,height-4); 
       }
    }
    function ChangeState(NewState)
    {
       
       state=NewState;
       Clear();
       RenderButton();  
    }




主工具条TToolbar

function TToolbar(Canvas, x, y, width, height) {
	var Context = Canvas.getContext('2d');
	this.Canvas = Canvas;
	this.x = x;
	this.y = y;
	this.width = width;
	this.height = height;
	var CurrentShapeProperty;
	var BorderColor;
	btnList = new Array();
	btnCounter = 0;
	Create();
}

首先我们来看一下TToolbar的建立参数和成员变量

Canvas是工具条的图象载体,与用户交互的UI元素. x,y 为工具条在画布(Canvas) 上的偏移量,width,height分别为工具条的宽度和高度.

定义画布的上下文

var Context = Canvas.getContext('2d');

CurrentShapeProperty 用于记录选择的一些图形属性 如画笔的宽度,颜色等.


TToolbar负责做两件重要的工作

1.判断鼠标移动到了哪个按钮或者鼠标点击了哪个按钮.

利用 InstallEvents 绑定工具条的画布Canvas鼠标事件.

mousemove函数逐个判断当前工具条所管理的按钮是否获得了鼠标焦点. 如果当前鼠标移到了该按钮上,将该按钮的图标设为相应图标(在testHit函数中).其余图标设置为普通状态.

mousedown 函数逐个判断当前工具条所管理的按钮是否获得了鼠标点击.如果是颜色按钮则将当前选中的颜色值拷贝到大颜色按钮.

	mousemove = function(event) {
		var Current = null;
		for (var i = 0; i < btnList.length; i++) {
			if (btnList[i].testHit(event.clientX, event.clientY) == true)
				Current = btnList[i];
		}
		if (Current != null) {
			for (var i = 0; i < btnList.length; i++) {
					if ((btnList[i] != Current) && (btnList[i].getisChecked() == false))
						btnList[i].setNormal();
			}
		}
	};
	mousedown = function(evnet) {
		var Current = null;
		for (var i = 0; i < btnList.length; i++) {

			if (btnList[i].testMouseDown(event.clientX, event.clientY) == true)
				Current = btnList[i];
		}
		if (Current != null) {
			for (var i = 0; i < btnList.length; i++) {
				if (Current.getGroup() == btnList[i].getGroup()) {
					if (btnList[i] != Current)
						btnList[i].setNormal();
				}
			}
			if (Current.getGroup()==3)
			{
			  var Color=Current.Command();
			  ColorSelected(Color);
			 }
		}
		
	};

	//安装鼠标移动、点击等方法
	this.InstallEvents = function() {
		Canvas.onmousemove = function(event) {
			mousemove(event);
		};
		Canvas.onmousedown = function(event) {
			mousedown(event);
		};
	};


另外我之前想用以下方法来绑定鼠标事件,没有成功请帮看一下问题出在哪里,谢谢

	function AddEvent(element, eventName, eventHandler) {
		window.alert( typeof element.addEventListener);
		if ( typeof element.addEventListener != "undefined") {
			window.alert(eventHandler);
			element.addEventListener(eventName, eventHandler, false);
			window.alert(element.onmousemove);
		} else
			element.attachEvent(eventName, eventHandler);
	}

	
	//安装鼠标移动、点击等方法
	this.InstallEvents = function() {
		AddEvent(Canvas,"onmousemove",this.mousemove);
		AddEvent(Canvas,"onmousedown",this.mousedown);
	};



2.管理画图的命令(TComand)

建立绘图命令会在后续的章节进行介绍.

 

this.getNewCommand = function(DisplayCanvas) {
		for (var i = 0; i < btnList.length; i++) {
			if (btnList[i].getGroup() == 1) {
				if (btnList[i].getisChecked()) {
					var commandId = btnList[i].Command();
					var command = new TCommand(DisplayCanvas, commandId);
					return command;
				}
			}

		}
		return null;
	};

在线演示


工具条对象完整代码(TToolbar)

function TToolbar(Canvas, x, y, width, height) {
	var Context = Canvas.getContext('2d');
	this.Canvas = Canvas;
	this.x = x;
	this.y = y;
	this.width = width;
	this.height = height;
	var CurrentShapeProperty;
	var BorderColor;
	btnList = new Array();
	btnCounter = 0;
	Create();
	// InstallEvents();
	function Create() {

		Context.strokeStyle = "black";
		Context.lineWidth = "2";
		Context.strokeRect(x, y, width, height);
	}


	this.AddButton = function(button) {
		btnList[btnCounter++] = button;
	};
	function AddEvent(element, eventName, eventHandler) {
		window.alert( typeof element.addEventListener);
		if ( typeof element.addEventListener != "undefined") {
			window.alert(eventHandler);
			element.addEventListener(eventName, eventHandler, false);
			window.alert(element.onmousemove);
		} else
			element.attachEvent(eventName, eventHandler);
	}

	mousemove = function(event) {
		var Current = null;
		for (var i = 0; i < btnList.length; i++) {
			if (btnList[i].testHit(event.clientX, event.clientY) == true)
				Current = btnList[i];
		}
		if (Current != null) {
			for (var i = 0; i < btnList.length; i++) {
					if ((btnList[i] != Current) && (btnList[i].getisChecked() == false))
						btnList[i].setNormal();
			}
		}
	};
	mousedown = function(evnet) {
		var Current = null;
		for (var i = 0; i < btnList.length; i++) {

			if (btnList[i].testMouseDown(event.clientX, event.clientY) == true)
				Current = btnList[i];
		}
		if (Current != null) {
			for (var i = 0; i < btnList.length; i++) {
				if (Current.getGroup() == btnList[i].getGroup()) {
					if (btnList[i] != Current)
						btnList[i].setNormal();
				}
			}
			if (Current.getGroup()==3)
			{
			  var Color=Current.Command();
			  ColorSelected(Color);
			 }
		}
		
	};

	//安装鼠标移动、点击等方法
	this.InstallEvents = function() {
		//AddEvent(Canvas,"onmousemove",this.mousemove);
		//AddEvent(Canvas,"onmousedown",this.mousedown);
		//Canvas.οnmοusemοve=this.mousemove;
		Canvas.onmousemove = function(event) {
			mousemove(event);
		};
		Canvas.onmousedown = function(event) {
			mousedown(event);
		};
	};
	this.setBorderColorButton=function(ColorButton)
	{
		BorderColor=ColorButton;		
	};
	function ColorSelected (color) {
	   BorderColor.setColor(color);
	} 
	this.getNewCommand = function(DisplayCanvas) {
		for (var i = 0; i < btnList.length; i++) {
			if (btnList[i].getGroup() == 1) {
				if (btnList[i].getisChecked()) {
					var commandId = btnList[i].Command();
					var command = new TCommand(DisplayCanvas, commandId);
					return command;
				}
			}

		}
		return null;
	};
	this.getShapeProperty = function() {
		if (typeof CurrentShapeProperty=="undefined")
		CurrentShapeProperty = new TShapeProperty();
		CurrentShapeProperty.setLineColor(BorderColor.Command());
		for (var i = 0; i < btnList.length; i++) {
			if (btnList[i].getGroup() == 2) {
				if (btnList[i].getisChecked()) {
					CurrentShapeProperty.setLineWidth(btnList[i].Command()); 
				}
			}
		}
		return CurrentShapeProperty;
	};
	
}

图片按钮完整代码(TImageButton)

 

function TImageButton(Command, NormalSrc, MouseOnSrc, MouseDownSrc, x, y, width, height, Toolbar, group) {
	var command = Command;
	var NormalSrc = NormalSrc;
	var MouseOnSrc = MouseOnSrc;
	var MouseDownSrc = MouseDownSrc;
	var x = x;
	var y = y;
	var width = width;
	var height = height;
	var Canvas = Toolbar.Canvas;
	var Context = Canvas.getContext("2d");
	var CSN = "Normal";
	var CSO = "MouseOn";
	var CSD = "MouseDown";
	var state = CSN;
	var Group = group;
	var image = new Image();
	CreateButton();

	function CreateButton() {

		LoadImage(NormalSrc);
	}

	function Absx() {
		return Canvas.offsetLeft + Toolbar.x + x;
	};
	function Absy() {

		return Canvas.offsetTop + Toolbar.y + y;
	};
	function PointIn(testx, testy) {
		if ((testx > Absx()) && (testx < (Absx() + width)) && (testy > Absy()) && (testy < (Absy() + height))) {

			return true;

		} else
			return false;

	};
	function Clear() {
		Context.clearRect(Toolbar.x + x, Toolbar.y + y, width, height);
	}

	function LoadImage(newsrc) {

		image.src = newsrc;

		if (image.complete) {
			RenderImage(image);
		} else
			image.onload = function() {
				RenderImage(image);
			};
	}

	function RenderImage(image) {

		Context.drawImage(image, Toolbar.x + x, Toolbar.y + y, width, height);
	}

	function ChangeState(NewState) {

		state = NewState;
		Clear();
		if (NewState == CSN)
			LoadImage(NormalSrc);
		else if (NewState == CSO)
			LoadImage(MouseOnSrc);
		else if (NewState == CSD)
			LoadImage(MouseDownSrc);
	}


	this.testHit = function(dx, dy) {

		if (PointIn(dx, dy)) {

			if (state == CSN) {
				ChangeState(CSO);

			}
			return true;
		}
		return false;

	};
	this.OnClick = function() {
	};
	this.testMouseDown = function(dx, dy) {

		if (PointIn(dx, dy)) {
			ChangeState(CSD);
			this.OnClick();
			return true;
		}
		return false;
	};
	this.getisChecked = function() {
		return (state == CSD);
	};
	this.Command = function() {
		return command;
	};
	this.MoveOn = function() {
		return (state == CSO);
	};
	this.setNormal = function() {
		ChangeState(CSN);
	};
	this.getGroup = function() {
		return Group;
	};
}


颜色选择框的完整代码（TColorButton）

<span style="font-size:12px;">function TColorButton(Command,
                      x,
                      y,
                      width,
                      height,
                      Toolbar,
                      group)
{
	var command=Command;
    var x=x;
    var y=y;
    var width=width;
    var height=height;
    var Canvas=Toolbar.Canvas;
    var Context=Canvas.getContext("2d");
    var CSN="Normal";
    var CSO="MouseOn";
    var CSD="MouseDown";
    var state=CSN;
    var Group=group;
    CreateButton();
    function CreateButton()
    {
       RenderButton();
    }
    function Absx() 
    {
       return Canvas.offsetLeft+Toolbar.x+x;
    };
    function Absy() 
    {
       
       return Canvas.offsetTop+Toolbar.y+y;
    };
    function PointIn (testx,testy)
    {
       if ((testx>Absx())&&(testx<(Absx()+width))
          &&(testy>Absy()) && (testy<(Absy()+height)))
         {
   
              return true;
              
              }
          else
             return false; 
              
    }; 
    function Clear()
    {
       Context.clearRect(Toolbar.x+ x,Toolbar.y+ y,width,height);
    }
    function RenderButton()
    {
       
       Context.fillStyle=command;
       Context.fillRect(Toolbar.x+ x, Toolbar.y+ y,width,height);
       if (state==CSO)
       {
       	  Context.strokeStyle="#FFCC33";
		  Context.lineWidth=2;
		  Context.strokeRect(Toolbar.x+ x+2, Toolbar.y+ y+2,width-4,height-4); 
       }
    }
    function ChangeState(NewState)
    {
       
       state=NewState;
       Clear();
       RenderButton();  
    }
    this.testHit=function(dx,dy)
    {
      
       if (PointIn(dx,dy))
       {
 
         if (state==CSN)
         {
            ChangeState(CSO);

         }
         return true;
       }
       return false;

    };
    this.testMouseDown=function(dx,dy)
    {
      
       if (PointIn(dx,dy))
       {
            ChangeState(CSD);
            return true;
       } 
       return false;
    };
    this.getisChecked=function()
    {
       return (state==CSD);
    };
    this.Command=function()
    {
       return command;
    };
    this.MoveOn=function()
    {
      return (state==CSO);
    };
    this.setNormal=function()
    {
       ChangeState(CSN);
    };
    this.getGroup=function()
    {
        return Group;
    };
    this.setColor=function(color)
    {
    	command=color;
    	Context.fillStyle=command;
        Context.fillRect(Toolbar.x+ x, Toolbar.y+ y,width,height);
    };
	
} 
</span>






gongztPM
关注
专栏目录
自定义View，和Canvas(画布)，Paint(画笔)，Path(路径)的用法
N_Y_S的博客
08-05 683
怎么自定义控件，Canvas画布，Paint画笔，Path路径的使用
html5在线画图工具,HTML5 Canvas画板画图工具 可定义笔刷和画布
weixin_30677191的博客
05-30 876
本文作者html5tricks，转载请注明出处下面我们来简单地分析一下实现这个HTML5网页画板的原理及代码，代码由HTML以及Javascript组成，主要还是Javascript代码。HTML代码：HTML代码非常简单，仅仅是构造了一个canvas容器，我们的画板就在这个地方生成。Javascript代码：首先我们通过一组变量来定义画板的样式，以及一些数据的初始化：var canvas;var...
HTML5Canvas实现简易画图工具（铅笔，直线，矩形，圆，文本框，橡皮擦等）
m0_60014407的博客
08-03 2464
初学Canvas，用canvas做了简单的画图工具体会并熟悉了一下大致的实现方案。
HTML5 Canvas实现web画图之自由画笔
09-27
能实现web端以及手机端同时使用
React Canvas 绘图工具入门指南
最新发布
gitblog_00909的博客
08-09 611
React Canvas 绘图工具入门指南 react-canvas-drawReact Component for drawing in canvas项目地址:https://gitcode.com/gh_mirrors/re/react-canvas-draw 项目介绍 React Canvas 绘图工具是一款基于React.js构建的功能齐全的绘图应用程序，旨在释放您的创造力。无论您是艺术...
canvas 画笔
weixin_44134551的博客
04-14 158
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/> <title>canvas写字</title> <script src="jq
HTML5 canvas 在线画笔绘图工具（四）
gongztPM的专栏
02-28 1072
HTML5画图命令 图形的绘制是由TDrawHandler与TCommand 协同工作完成。 TDrawHandler需要完成以下工作 1、聚集类用于管理绘图的命令 TCommand 2、管理鼠标事件 ，鼠标点击第一下开始绘图，鼠标点击第二下绘图完成。在点第一次和第二次之间在画板上拖动鼠标时系统动态的根据鼠标位置绘图。 3、将所有绘图命令生成json数据，以便于保存。 4、打开新的图形
canvas 画笔、橡皮擦和文本输入
qq_28510897的博客
11-05 426
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="toolba
HTML5 canvas 在线画笔绘图工具（三）
gongztPM的专栏
02-26 1407
组装画板（TDrawBuilder） 在这一小节中我们要把工具条和画板组装起来，让他们可以协同进行工作。 画板通过一个命名为TDrawBuilder
HTML5 canvas 在线画笔绘图工具（一）
gongztPM的专栏
02-25 3195
HTML5 canvas 在线画笔绘图工具       这是我用Javascript写的第一个程序，在写的过程中走了很多弯路，所以写完之后想分享出来，给与我一样的初学者做为学习的参考，同时在编写这个程序时我也碰到一些问题，这里我也会一并的提出来给大家讨论，让我们都能得到进步。因为是初学javascript，所以水平较低，欢迎大家提出批评意见。      程序包含以下内容 1、工具条
使用HTML5 Canvas的画笔应用程序
04-05
在"使用HTML5 Canvas的画笔应用程序"中，我们主要探讨的是如何利用HTML5的Canvas API创建一个在线画笔应用，用户可以在浏览器上进行绘画创作。 首先，Canvas是一个基于矢量图形的元素，通过JavaScript来操纵其上的...
html5-Canvas绘图
lanyanai的专栏
10-14 769
在html5中我觉得最重要的就是引入了Canvas，使得我们可以在web中绘制各种图形。给人感觉单在这点上有点模糊我们web和桌面程序的感觉。在html5外web中也有基于xml的绘图如：VML、SVG。而Canvas为基于像素的绘图。Canvas是一个相当于画板的html节点，我们必须以js操作绘图。 如下： 你的浏览器还不支持哦定义。 我们可以获取canvas对象为var c=docum
基于HTML5 Canvase的在线画图及图片处理工具
梁植淋的博客
06-11 3691
简介       这是基于HTML5的Canvas而实现的在线画图及简单图片处理的工具，是我的计算机图形学期末课程设计作业。主要功能包括：画图、颜色反转、转灰度图、阴影效果、横向渐变、纵向渐变等。处理好的图片还能以png的格式下载到本地。不过，由于花的时间不多，没能深一步完善，不足之处还请见谅！ 功能展示 画图 下载到本地的png 灰度图效果 颜色反转效
canvas实现简单的画笔功能
热门推荐
fanzhang1990的专栏
04-13 1万+
模仿笔画 #_canvas{ background-color: rgb(240,240,240); } sorry, your broswer does not support html5! var canvas_ = document.getElementById("_canvas"); //全屏 canvas_.setAttribute("width",
Android之Canvas画笔和画布
weixin_42370957的博客
12-01 2614
久违的Canvas画布，终于学到这里了，学完以后附上博文一篇以便日后记不住。 目录 一、Canvas（画布） 二、Paint（画笔） 三、实例     涉及的相关知识点             1、绘制安卓机器人             2.绘制文本             3.绘制图片            4.绘制路径： 首先我觉得最难易懂大的一点是Canvas里面的四个坐...
canvas简单的实现画笔功能
zhangbiaoxiaoming的博客
10-22 6565
还是直接上代码。（自己写的，可能代码布局有点乱，进步中，加油） &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&a
Canvas画笔的基本使用
流楚丶格念的博客
02-03 4875
文章目录Canvas画笔的基本使用图形绘制设置样式画笔实例练习渐变色绘制镂空的房子绘制坐标网格绘制坐标系绘制坐标点绘制折线图参考文档 Canvas画笔的基本使用 图形绘制 需要理解些概念： 路径的概念 路径的绘制 描边 stroke() 填充 fill() 闭合路径 手动闭合 程序闭合 closePath() 填充规则(非零环绕) 开启新的路径 beginPath() 设置样式 画笔的状态 lineWidth 线宽，默认1px lineCap 线末端类型：(butt默
HTML5-canvas 绘图
探秘
04-05 600
富应用：  漂亮的图片，  人机互动功能， 以及炫目的动画效果； Canvas 画布：   canvas 独特的地方是 需要javascript 来操作，  不使用javascript 就无法绘制图形， 也不能画出图画。   这意味着canvas 是一个编程工具， 而这已然超出了web基于文档的设计初衷。 Canvas 并在其中绘制线条，曲线 和 简单的图形， Can
HTML5 Canvas火焰画笔动画特效.zip
09-26
总结起来，"HTML5 Canvas火焰画笔动画特效"是一个结合了HTML5 Canvas、jQuery和可能的jQuery插件的技术示例，展示了如何利用这些工具创建引人注目的网页动画。对于前端开发者来说，理解并学习这种特效的实现可以帮助...
一个基于canvas的移动端图片编辑插件
08-08
一个基于canvas的移动端图片编辑插件
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值