HTML5 canvas 绘制精美的图形

时间  2019-11-19
标签 html5 html canvas 绘制 精美 图形 栏目 HTML5 繁體版
原文   原文链接

HTML5 是一个新兴标准，它正在以愈来愈快的速度替代久经考验的 HTML4。HTML5 是一个 W3C “工做草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性，它们都支持现行的 HTML 4.01 版本规范。它还引入了几个新元素和属性，它们适用许多使用 web 页面的领域 — 音频、视频、图形、数据存储、内容呈现，等等。本文主要关注图形方面的加强：canvas。javascript

新的 HTML5 canvas 是一个原生 HTML 绘图簿，用于 JavaScript 代码，不使用第三方工具。跨全部 web 浏览器的完整 HTML5 支持尚未完成，但在新兴的支持中，canvas 已经能够在几乎全部现代浏览器上良好运行了，但 Windows® Internet Explorer® 除外。幸运的是，一个解决方案已经出现，将 Internet Explorer 也包含进来。php

本质上，canvas 元素是一个白板，直到您在它上面 “绘制” 一些可视内容。与拥有各类画笔的艺术家不一样，您使用不一样的方法在 canvas 上做画。您甚至能够在 canvas 上建立并操做动画，这不是使用画笔和油彩所可以实现的。html

本文探索新的 HTML canvas 元素，从简单地包含一个 canvas 元素到高级 JavaScript 交互（动画的关键）逐步进行演示。学习如何在一个 web 页面上显示 canvas。本文针对 web 设计师和开发人员，尽管 JavaScript 知识不是必须的，但理解该语言的运行方式将有所帮助。可是，HTML 知识是关键所在，尤为是如何建立一个基本 web 页面。html5

要查看本文展现的示例的实时实例，您须要一个浏览器并能访问 Internet。全部示例都在一个真实网站上提供（参见 参考资料）。java

浏览器支持

肯定哪些浏览器支持 HTML5 和一个移动目标达到什么程度。在本文撰写之时，Google Chrome、Apple Safari 和 Mozilla Firefox 都支持大多数新的 HTML5 元素，它们都支持 canvas 元素。Internet Explorer 7 和 8 都不支持 HTML5；Internet Explorer 9 处于测试阶段，支持 HTML5，但还有一些问题。web

在此期间，有一个针对不支持 HTML5 的 Internet Explorer 版本的补丁可用。这个补丁的前提是建立使用 JavaScript 代码的元素。例如，可使用代码段 document.createElement('canvas') 建立一个可识别的 Canvas 标记；可是，这并不意味着有东西通过元素自己 。一个流行的解决方法是包含一个完整的基于 canvas 的 JavaScript 库，这个库由 Google 提供，称为 ExplorerCanvas— 或简称 excanvas。下载并将其做为一个外部文件引用，以下所示。（参见 参考资料 中的连接，了解更多 excanvas 信息。）ajax

<!--[if IE]>
  <script type="text/javascript" src="excanvas.js"></script>
<![endif]-->

经过包含 excanvas，您向 Internet Explorer 提供 canvas 及其大多数方法。编程

建立您的第一个 canvas

因为 canvas 只是一个 HTML 标记，所以它的显示方式只是包含在标记中。第一个示例（如 图 1 所示）显示一个最简单的 canvas。它之因此可见，是由于它经过 style 属性得到了一个颜色方案，经过 width 和 height 属性得到了其大小。canvas

图 1. 一个空白 canvas
一个空白 canvas，但因为背景样式而变得可见

这个页面的代码简短明了，如 清单 1 所示。浏览器

清单 1. 包含一个 canvas 的 web 页面的 HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
</head>
<body>
<div style="margin-left:30px;">
<canvas id="myCanvasTag" width="400" height="400" 
    style="border: 10px yellow solid"></canvas>
<br /><br />
<a href="index.html">back</a>
</div>
</body>
</html>

这个 canvas 的宽度和高度均为 400 像素，边框为黄色，背景为蓝色。canvas 上没有任何实际绘图；绘图经过属于 canvas 的 JavaScript 方法完成。

canvas 方法

表 1 列示了几个附加到 canvas 上下文的方法。

表 1. canvas 方法
方法 用途
getContext(contextId) 公开在 canvas 上绘图须要的 API。唯一（当前）可用的 contextID 是 2d。
height 设置 canvas 的高度。默认值是 150 像素。
width 设置 canvas 的宽度。默认值是 300 像素。
createLinearGradient(x1,y1,x2,y2) 建立一个线性渐变。起始坐标为 x1,y1，结束坐标为 x2,y2。
createRadialGradient(x1,y1,r1,x2,y2,r2) 建立一个放射状渐变。圆圈的起始坐标是 x1,y1，半径为 r1。圆圈的结束坐标为x2,y2，半径为 r2。
addColorStop(offset, color) 向一个渐变添加一个颜色中止。颜色中止（color stop） 是渐变中颜色更改发生的位置。offset 必须介于 0 到 1 之间。
fillStyle 设置用于填充一个区域的颜色 — 例如，fillStyle='rgb(255,0,0)'.
strokeStyle 设置用于绘制一根直线的颜色 — 例如，fillStyle='rgb(255,0,0)'.
fillRect(x,y,w,h) 填充一个定位于 x 和 y，宽度和高度分别为 w 和 h 的矩形。
strokeRect(x,y,w,h) 绘制一个定位于 x 和 y，宽度和高度分别为 w 和 h 的矩形的轮廓。
moveTo(x,y) 将绘图位置移动到坐标 x,y。
lineTo(x,y)

从绘图方法结束的最后位置到 x,y 绘制一条直线。
 translate(x,y)：
translate(x,y)函数是将整个canvas水平移动x距离，垂直移动y距离。
canvas是以（0,0）为默认原点，其原点默认在屏幕左上角；经过translate（x，y）把点（x，y）做为原点。
须要注意的是：是在原点的基础上分别偏移x和y。
例子：原点假如落在（1，1），那么translate（10，10）就是在原点（1，1）基础上分别在x轴、y轴移动10，则原点变为（11,11）。

 scale(x,y)缩放

 rotate(deg)旋转角度

构建更复杂的 canvas 应用程序

本小节将展现一系列示例，每一个示例的功能都比前一个示例略有增长。

更深入的视觉体验

首先，将一组矩形放置到 canvas 上。记住，矩形是拥有 4 条直边和 4 个直角的图形，正方形是矩形的变体。图 2 显示 canvas 上有一系列矩形，每一个矩形都比前一个略小。注意，每一个矩形的颜色都不一样，使其更清晰明确。

图 2. 使用一些矩形填充的 canvas
canvas 由一些颜色不一样的矩形填充

清单 2 显示了用于建立图 2 中的 canvas 的代码。每一个矩形都由两行代码建立：首先，fillStyle 方法使用颜色定义的红、绿、蓝（RGB）格式定义颜色（fillStyle='rgb(255,0,0)）。而后，fillRect 方法（fillRect(50,50,300,300)）定义大小。前两个值设置起始坐标，后两个值设置结束坐标。

清单 2. 使用 JavaScript 代码建立上下文并使用各类方法
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]>
  <script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script>
 window.onload=function() {
   var mycanvas=document.getElementById("myCanvasTag");
   var mycontext=mycanvas.getContext('2d');
   mycontext.fillStyle='rgb(0,0,255)'; 
   mycontext.fillRect(0,0,400,400);   
   mycontext.fillStyle='rgb(255,0,0)';  
   mycontext.fillRect(50,50,300,300);    
   mycontext.fillStyle='rgb(0,255,0)';  
   mycontext.fillRect(100,100,200,200);
   mycontext.fillStyle='rgb(100,100,100)';  
   mycontext.fillRect(125,175,150,25);
 }
</script>
</head>
<body>
<div style="margin-left:30px;">
<canvas id="myCanvasTag" width="400" height="400" style="border: 10px yellow solid">
</canvas>
<br /><br />
<a href="index.html">back</a>
</div>
</body>
</html>

要在 canvas 上绘图，经过将 getContext('2d') 应用到 canvas 元素访问提供方法的 API。经过这个 document.getElementById 方法，canvas 元素被设置为一个 JavaScript 变量：

var mycanvas=document.getElementById("myCanvasTag");

而后将 getContext 应用到 canvas 元素，以下所示。

var mycontext=mycanvas.getContext('2d');

一旦一个变量被设置到上下文，全部方法就可使用了。

下一个示例展现如何结合两种技术。一种是矩形重叠，方法是使用 fillRect 参数来定位矩形（见 图 3）。

图 3. 向一个 canvas 上的矩形应用透明度
设置 canvas 上的对象的透明度

第二种技术是 RGB 颜色处理的变体，即添加透明度。不使用 rgb，而是使用 rgba。a 表示 alpha 通道，该通道控制透明度。在图 3 中的示例中，第二个矩形的透明度被设置为 50%（或 .5），第三个设置为 25%（或 .25）。清单 3 显示了完整的标记。

清单 3. 使用透明度
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]>
  <script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script>
  window.onload=function() {
    var mycanvas=document.getElementById("myCanvasTag");
    var mycontext=mycanvas.getContext('2d');
    mycontext.fillStyle='rgb(0,0,255)'; 
    mycontext.fillRect(30,30,300,300);           
    mycontext.fillStyle='rgba(0,255,0,0.5)';  
    mycontext.fillRect(60,60,300,300);    
    mycontext.fillStyle='rgba(255,0,0,0.25)';  
    mycontext.fillRect(90,90,300,300); 
  }
</script>
</head>
<body>
<div style="margin-left:30px;">
<canvas id="myCanvasTag" width="400" height="400" style="border: 10px yellow solid">
</canvas>
<br /><br />
<a href="index.html">back</a>
</div>
</body>
</html>

渐变— 通过协调的颜色混合 — 原生于 canvas ，经过两种方法：createLinearGradient 和 createRadialGradient。图 4 展现了一个线性渐变。addColorStop 方法定义一个颜色，以及它在渐变中变为活动状态的位置。因为一个渐变能够拥有多个颜色中止，所以这种定位是主观的。颜色定位值必须介于 0 到 1 之间，但测试变体和颜色中止的数量能够生成不一样的结果，即便一个值（好比 .25）保持不变。换句话说，一个颜色中止能够将其位置设定为 .25，可是相关颜色能够从整个渐变路径的四分之一处以后一点开始发生，一直持续到渐变结束，具体状况取决于您设置其余颜色中止的位置。记住，这是一个新的实现，可能还在改进过程当中。渐变的一个好处是它们老是引人注目，不管代码和结果是否通过完美的协调。

图 4. 一个线性渐变
一个线性渐变

图 4 中的渐变经过 清单 4 中的 JavaScript 代码建立。

清单 4. 建立一个线性渐变
    var mycanvas=document.getElementById("myCanvasTag");
    var mycontext=mycanvas.getContext('2d');
    var mygradient=mycontext.createLinearGradient(30,30,300,300);           
    mygradient.addColorStop(0,"#FF0000");
    mygradient.addColorStop(1,"#00FF00");
    mycontext.fillStyle=mygradient;
    mycontext.fillRect(0,0,400,400);

注意，清单 4 中的颜色中止被全面实现为从这个方法自己建立的一个实时（on-the-fly）渐变的一个方法。语句mygradient.addColorStop(0,"#FF0000") 显示颜色中止拥有两个参数：位置和颜色。

图 5 展现了一个放射状渐变。用于建立这个渐变的代码与清单 4 中的代码相似，除了使用 createRadialGradient 方法替代createLinearGradient 方法以外。

图 5. 一个放射状渐变
一个放射状渐变

用于建立图 5 中的放射状渐变的代码如 清单 5 所示。注意全部 5 个颜色中止。

清单 5. 建立一个放射状渐变
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]>
  <script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script>
  window.onload=function() {
    var mycanvas=document.getElementById("myCanvasTag");
    var mycontext=mycanvas.getContext('2d');
    var mygradient=mycontext.createRadialGradient(300,300,0,300,300,300);           
    mygradient.addColorStop("0","magenta");
    mygradient.addColorStop(".25","blue");
    mygradient.addColorStop(".50","green");
    mygradient.addColorStop(".75","yellow");
    mygradient.addColorStop("1.0","red");                
    mycontext.fillStyle=mygradient;
    mycontext.fillRect(0,0,400,400);
  }
</script>
</head>
<body>
<div style="margin-left:30px;">
<canvas id="myCanvasTag" width="400" height="400" style="border: 10px blue solid">
</canvas>
<br /><br />
<a href="index.html">back</a>
</div>
</body>
</html>

多个 canvas

一个 web 页面可以包含多个 canvas，每一个 canvas 引用它们本身的独特 JavaScript 上下文变量。结果，每一个 canvas 都独立于其余 canvas 工做。图 6 展现了 4 个 canvas，每一个 canvas 上的图像都不一样。

图 6. 一个 web 页面上的多个 canvas
多个 canvas

清单 6 显示了用于建立图 6 中的页面的代码。注意，每一个 canvas 都有一个唯一 ID 且每一个上下文都是唯一的。

清单 6. 一个 web 页面上的多个 canvas
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]>
  <script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script>
  window.onload=function() {
    var mycontext1=document.getElementById("myCanvasTag1").getContext('2d');
    var mycontext2=document.getElementById("myCanvasTag2").getContext('2d');
    var mycontext3=document.getElementById("myCanvasTag3").getContext('2d');
    var mycontext4=document.getElementById("myCanvasTag4").getContext('2d');         
    // gradient 1
    var mygradient1=mycontext1.createLinearGradient(30,30,90,90);           
    mygradient1.addColorStop(0,"#FF0000");
    mygradient1.addColorStop(1,"#00FF00");
    mycontext1.fillStyle=mygradient1;
    mycontext1.fillRect(0,0,100,100);
    // gradient 2   
    var mygradient2=mycontext2.createLinearGradient(30,30,90,90);           
    mygradient2.addColorStop(1,"#FF0000");
    mygradient2.addColorStop(0,"#00FF00");
    mycontext2.fillStyle=mygradient2;
    mycontext2.fillRect(0,0,100,100);

    var mygradient3=mycontext3.createLinearGradient(30,30,90,90);           
    mygradient3.addColorStop(0,"#0000FF");
    mygradient3.addColorStop(.5,"#00FFDD");
    mycontext3.fillStyle=mygradient3;
    mycontext3.fillRect(0,0,100,100);

    var mygradient4=mycontext1.createLinearGradient(30,30,90,90);           
    mygradient4.addColorStop(0,"#DD33CC");
    mygradient4.addColorStop(1,"#EEEEEE");
    mycontext4.fillStyle=mygradient4;
    mycontext4.fillRect(0,0,100,100);
  }
</script>
</head>
<body>
<div style="margin-left:30px;">
<canvas id="myCanvasTag1" width="100" height="100" style="border: 10px blue solid">
</canvas>
<canvas id="myCanvasTag2" width="100" height="100" style="border: 10px green solid">
</canvas>
<br />
<canvas id="myCanvasTag3" width="100" height="100" style="border: 10px red solid">
</canvas>
<canvas id="myCanvasTag4" width="100" height="100" style="border: 10px black solid">
</canvas>
<br /><br />
<a href="index.html">back</a>
</div>
</body>
</html>
 

回页首

JavaScript 事件和动画

本文已经展现了可用于 canvas 的各类方法，每种方法都建立了一个可视结果。如今咱们提升一个等级，看看 canvas 如何实现事件和动画。JavaScript 可以识别许多事件，包括在一个特定 web 页面元素上方移动或悬停鼠标。JavaScript 语言可以识别更多事件，下面的示例将使用其中几个。

整合事件

图 7 中的示例是使用前面清单中的方法建立的。如今咱们添加几个新技术。面部的鼻子、眼睛和圆形项目以及外部边界都使用 arc 方法建立。眼睫毛被绘制为线条，嘴被建立为一条贝赛尔曲线。图 7 还在 canvas 底部显示了一些文本，这是使用 fillText 方法建立的。

图 7. 使用 JavaScript 事件绘制一张正在眨眼的脸
一张正在眨眼的脸

清单 7 显示图 7 使用的代码。

清单 7. 使用事件建立一个眨眼
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]>
  <script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script>
window.onload=function() {
  var mycanvas=document.getElementById("myCanvasTag");
  var mycontext=mycanvas.getContext('2d');

  //draw face
  mycontext.beginPath();
  mycontext.arc(300, 250, 200, 0, Math.PI * 2, true);
  mycontext.closePath();
  mycontext.stroke();

  //draw left eye
  mycontext.beginPath();
  mycontext.arc(220, 150, 30, 0, Math.PI * 2, true);
  mycontext.closePath();
  mycontext.fillStyle='rgb(100,100,225)';
  mycontext.fill();

  //draw left iris
  mycontext.beginPath();
  mycontext.arc(220, 150, 10, 0, Math.PI * 2, true);
  mycontext.closePath();
  mycontext.fillStyle='rgb(0,0,0)';
  mycontext.fill();

  //draw left eyelid
  mycontext.beginPath();
  mycontext.arc(220, 150, 30, 0, Math.PI, true);
  mycontext.closePath();
  mycontext.fillStyle='rgb(200,200,200)';
  mycontext.fill();

  //draw left eyelashes
  mycontext.strokeStyle='rgb(0,0,0)';
  lashes(mycontext,198, 170, 193, 185);
  lashes(mycontext,208, 177, 204, 193);
  lashes(mycontext,220, 180, 220, 195);
  lashes(mycontext,232, 177, 236, 193);
  lashes(mycontext,242, 170, 247, 185);
  mycontext.stroke();

  openeye();

  //draw right eyelashes
  mycontext.strokeStyle='rgb(0,0,0)';
  lashes(mycontext, 358, 170, 353, 185);
  lashes(mycontext, 368, 177, 364, 193);
  lashes(mycontext, 380, 180, 380, 195);
  lashes(mycontext, 392, 177, 396, 193);
  lashes(mycontext, 402, 170, 407, 185);
  mycontext.stroke();

  //draw nose
  mycontext.beginPath();
  mycontext.arc(300, 250, 20, 0, Math.PI * 2, true);
  mycontext.closePath();
  mycontext.stroke();

  // draw smile
  mycontext.beginPath();
  mycontext.lineWidth = 10;
  mycontext.moveTo(180, 320);
  mycontext.bezierCurveTo(140, 320, 340, 420, 400, 360);
  mycontext.closePath();
  mycontext.stroke();

  //draw message at bottom
  mycontext.font="1em sans-serif";
  mycontext.fillStyle="rgb(0,0,0)";
  mycontext.fillText("Move the mouse over and off the canvas - the face winks!", 10, 480);
}

function lashes(cntx,x1,y1,x2,y2) {
  cntx.moveTo(x1,y1);
  cntx.lineTo(x2,y2);
}

function closeeye() {
  //close right eye
  var mycanvas=document.getElementById("myCanvasTag");
  var mycontext=mycanvas.getContext('2d');
  mycontext.beginPath();
  mycontext.arc(380, 150, 30, 0, Math.PI * 2, true);
  mycontext.closePath();
  mycontext.fillStyle='rgb(200,200,200)';
  mycontext.fill();
}

function openeye() {
  //open right eye
  var mycanvas=document.getElementById("myCanvasTag");
  var mycontext=mycanvas.getContext('2d');
  mycontext.beginPath();
  mycontext.arc(380, 150, 30, 0, Math.PI * 2, true);
  mycontext.closePath();
  mycontext.fillStyle='rgb(100,100,225)';
  mycontext.fill();
  //draw right iris
  mycontext.beginPath();
  mycontext.arc(380, 150, 10, 0, Math.PI * 2, true);
  mycontext.closePath();
  mycontext.fillStyle='rgb(0,0,0)';
  mycontext.fill();
  //draw right eyelid
  mycontext.beginPath();
  mycontext.arc(380, 150, 30, 0, Math.PI, true);
  mycontext.closePath();
  mycontext.fillStyle='rgb(200,200,200)';
  mycontext.fill();
}
</script>
</head>
<body>
<div style="margin-left:30px;">
<canvas id="myCanvasTag" width="600" height="500" style="border: 5px blue solid"
   onmouseover="closeeye()" onmouseout="openeye()"></canvas>
<br /><br />
<a href="index.html">back</a>
</div>
</body>
</html>

图 7 中的脸经过一些 JavaScript 事件而改变。特别是， onmouseover 和 onmouseout 事件分别用于调用 closeeye() 和 openeye() 函数。这些函数不是 canvas 的方法，可是标准 JavaScript 函数。事件和函数之间的链接在 canvas 元素自己中进行。在 清单 7 中，页面的主体区域接近代码的底部，那是 canvas 所在的位置。canvas 标记内是：

onmouseover="closeeye()" onmouseout="openeye()"

清单 7 中出现了一个新的构造 —beginPath() 和 endPath() 的使用，它们用于明确区分独立的复杂绘图动做。封装在其中的代码绘制一个特殊的图像，以分隔其余绘图动做。

关于 清单 7 中的代码的几个值得注意的地方列示以下：

  • 当页面打开时，经过调用 openeye() 函数来绘制右眼。
  • 使用 fillText 方法将文本写到 canvas 上。
  • 在 arc 方法中，MATH.PI * 2 建立了一个完整的圆圈，而 MATH.PI 将只建立一个半圆（例如，眼皮）。

动画

JavaScript 打包了一个强大的编程利器。这种语言可以执行不少操控，如 清单 8 所示。这个代码重复运行，在 canvas 上绘制一些线条。线条颜色随机设置。

清单 8. 使用 JavaScript 建立动画
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]>
  <script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
</head>
<body>
<div style="margin-left:30px;">
<canvas id="myCanvasTag" width="400" height="400" style="border: 10px blue solid">
</canvas>
<br /><br />
<a href="index.html">back</a>
</div>
<script>
  var mycanvas  = document.getElementById("myCanvasTag")
  var mycontext = mycanvas.getContext('2d');
  var x;
  var y;
  var x2;
  var y2;
  var r;
  var g;
  var b;
 function line() {
   x=Math.floor(Math.random()*190) + Math.floor(Math.random()*190);
   y=Math.floor(Math.random()*190) + Math.floor(Math.random()*190);
   x2=Math.floor(Math.random()*190) + Math.floor(Math.random()*190);
   y2=Math.floor(Math.random()*190) + Math.floor(Math.random()*190);
   r=Math.floor(Math.random()*255);
   g=Math.floor(Math.random()*255);
   b=Math.floor(Math.random()*255);
   mycontext.moveTo(x, y);
   mycontext.lineTo(x2, y2);
   mycontext.strokeStyle='rgb(' + r + ',' + g +  ',' + b + ')';  
   mycontext.lineWidth=Math.floor(Math.random()*6);      
   mycontext.stroke();
   mycontext.restore();
 }
 setInterval(line, 100);

</script>
</body>
</html>

图 8 显示了这个动画的一张快照。清单 8 中的代码与本文其余全部代码示例都不一样，由于 JavaScript 块被放置到页面底部，canvas 元素下方。这确保 canvas 在代码运行以前就已经被呈现了。

图 8. JavaScript 用于绘制无穷无尽的随机线条
一个 canvas 上的动画
 

回页首

结束语

HTML5 被定位于用于改变 web 开发的面貌。新的元素使得页面布局更简单，支持经过浏览器存储本地数据，拥有 canvas 之类的音频、视频和图形平台。随着浏览器升级以支持更多新功能，web 的性质和用户体验将变得妙不可言。web 开发前景一片光明！

参考资料

学习

得到产品和技术

 

文章出处：http://www.ibm.com/developerworks/cn/web/wa-html5canvas/#ibm-pcon

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程