JavaScript基礎(chǔ)——使用Canvas繪圖
更新時(shí)間：2016年11月02日 09:07:34 作者：A_山水子農(nóng)
這篇文章主要介紹了JavaScript基礎(chǔ)——使用Canvas繪圖，Canvas也真的跟現(xiàn)實(shí)生活中的畫布非常相似，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
最近在學(xué)習(xí)Canvas畫圖的方法，最近有時(shí)間做了個(gè)整理，如下：
1、基本用法
要使用<canvas>元素，必須先設(shè)置其width和height屬性，指定可以繪圖的區(qū)域大小，出現(xiàn)在開始后結(jié)束標(biāo)簽中的內(nèi)容是后備信息，如果瀏覽器不支持<canvas>元素，就會(huì)顯示這些信息。例如：
<canvas id="drawing" width="200" height="200">A Drawing of something</canvas>
使用toDataURL()方法，可以導(dǎo)出在<canvas>元素上繪制的圖像。
var drawing=document.getElementById("drawing");
//確定瀏覽器支持<canvas>元素
if(drawing.getContext){
//取得繪圖上下文對(duì)象的引用，“2d”是取得2D上下文對(duì)象
var context=drawing.getContext("2d");
//取得圖像的數(shù)據(jù)URI
var imgURI=drawing.toDataURL("image/png");
alert(imgURI);
//顯示圖像
var image=document.createElement("img");
image.src=imgURI;
document.body.appendChild(image);
}
2、2D上下文
（1）、填充和描邊
填充：用指定的樣式填充圖形；描邊：就是只在圖形的邊緣畫線。fillStyle和strokeStyle兩個(gè)屬性的值可以是字符串、漸變對(duì)象或模式對(duì)象。
var drawing=document.getElementById("drawing");
//確定瀏覽器支持<canvas>元素
if(drawing.getContext){
//取得繪圖上下文對(duì)象的引用，“2d”是取得2D上下文對(duì)象
var context=drawing.getContext("2d");</span>
<span style="font-size:14px;">//此程序由于沒有圖像，填充和描邊不會(huì)顯示 context.strokeStyle="#0000ff"; context.fillStyle="red"; }
（2）、繪制矩形
矩形是唯一一種可以直接在2D上下文繪制的形狀。與矩形有關(guān)的方法包括：fillRec()、strokeRect()和clearRect()。這三個(gè)方法都能接收4個(gè)參數(shù)：x坐標(biāo)、y坐標(biāo)、寬度和高度。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas繪圖</title>
</head>
<body>
<canvas id="drawing" width="200" height="200" style="border:#0F0 solid 1px">A Drawing of something</canvas>
<script>
var drawing=document.getElementById("drawing");
//確定瀏覽器支持<canvas>元素
if(drawing.getContext){
//取得繪圖上下文對(duì)象的引用，“2d”是取得2D上下文對(duì)象
var context=drawing.getContext("2d");
//繪制紅色矩形
context.fillStyle="red";
context.fillRect(10,10,50,50);
//繪制半透明的藍(lán)色矩形
context.fillStyle="rgba(0,0,255,0.5)";
context.fillRect(30,30,50,50);
//繪制紅色描邊矩形
context.strokeStyle="red";
context.strokeRect(10,90,50,50);
//繪制半透明的藍(lán)色描邊矩形
context.strokeStyle="rgba(0,0,255,0.5)";
context.strokeRect(30,120,50,50);
//在兩個(gè)矩形重疊的地方清除一個(gè)小矩形
context.clearRect(30,30,30,30);
}
</script>
</body>
</html>
下面為使用toDataURL()方法，導(dǎo)出在canvas元素上繪制的圖像程序如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas繪圖</title>
</head>
<body>
<canvas id="drawing" width="200" height="200" style="border:#0F0 solid 1px">A Drawing of something</canvas>
<br />
<h3>下面為使用toDataURL()方法，導(dǎo)出在canvas元素上繪制的圖像。</h3>
<script>
var drawing=document.getElementById("drawing");
//確定瀏覽器支持<canvas>元素
if(drawing.getContext){
//取得繪圖上下文對(duì)象的引用，“2d”是取得2D上下文對(duì)象
var context=drawing.getContext("2d");
//繪制紅色矩形
context.fillStyle="red";
context.fillRect(10,10,50,50);
//繪制半透明的藍(lán)色矩形
context.fillStyle="rgba(0,0,255,0.5)";
context.fillRect(30,30,50,50);
//繪制紅色描邊矩形
context.strokeStyle="red";
context.strokeRect(10,90,50,50);
//繪制半透明的藍(lán)色描邊矩形
context.strokeStyle="rgba(0,0,255,0.5)";
context.strokeRect(30,120,50,50);
//在兩個(gè)矩形重疊的地方清除一個(gè)小矩形
context.clearRect(30,30,30,30);
//取得圖像的數(shù)據(jù)URI
var imgURI=drawing.toDataURL("image/png");
//顯示圖像
var image=document.createElement("img");
image.src=imgURI;
document.body.appendChild(image);
}
</script>
</body>
</html>
（3）、繪制路徑
要繪制路徑，首先必須調(diào)用beginPath()方法，表示要開始繪制新路徑。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas繪圖</title>
</head>
<body>
<canvas id="drawing" width="420" height="420" style="border:#0F0 solid 1px">A Drawing of something</canvas>
<script>
var drawing=document.getElementById("drawing");
//確定瀏覽器支持<canvas>元素
if(drawing.getContext){
//取得繪圖上下文對(duì)象的引用，“2d”是取得2D上下文對(duì)象
var context=drawing.getContext("2d");
//開始路徑
context.beginPath();
/*繪制弧線，使用arc(x,y,radius,startAngle,endAngle,counterclockwise)方法
以(x,y)為圓心繪制一條弧線，弧線半徑為radius，起始和結(jié)束角度（用弧度表示）分別為startAngle
和endAngle。最后一個(gè)參數(shù)表示是否按逆時(shí)針方向計(jì)算，值為false表示順時(shí)針方向計(jì)算。
*/
context.arc(130,130,90,0,2*Math.PI,false);
/*arcTo(x1,y1,x2,y2,radius):從上一點(diǎn)開始繪制一條弧線，到(x2,y2)為止，并且以給
定的半徑radius穿過(x1,y1)
*/
context.arcTo(310,220,400,130,80)
/*bezierCurveTo(c1x,c1y,c2x,c2y,x,y):從上一點(diǎn)開始繪制一條曲線，到（x,y）為
止，并且以(c1x,c1y)和(c2x,c2y)為控制的。
*/
context.bezierCurveTo(320,210,400,250,310,300);
/*lineTo(x,y):從上一點(diǎn)開始繪制一條直線，到(x,y)為止*/
context.lineTo(0,300);
context.moveTo(130,220);
context.lineTo(100,300);
/*quadraticCurveTo(cx,cy,x,y):從上一點(diǎn)開始繪制一條二次曲線，到(x,y)為止，并且
以(cx,cy)作為控制點(diǎn)
*/
context.quadraticCurveTo(40,380,130,400);
context.lineTo(450,400);
/*rect(x,y,width,height):從點(diǎn)（x,y）開始繪制一個(gè)矩形路徑*/
context.rect(80,80,100,100)
context.strokeStyle="rgba(0,0,255,0.5)";
//最后必須調(diào)用stroke()方法，這樣才能把圖像繪制到畫布上。
context.stroke();
}
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas繪圖</title>
</head>
<body>
<canvas id="drawing" width="200" height="200" style="border:#0F0 solid 1px">A Drawing of something</canvas>
<script>
var drawing=document.getElementById("drawing");
//確定瀏覽器支持<canvas>元素
if(drawing.getContext){
//取得繪圖上下文對(duì)象的引用，“2d”是取得2D上下文對(duì)象
var context=drawing.getContext("2d");
//開始路徑
context.beginPath();
//繪制外圓
context.arc(100,100,99,0,2*Math.PI,false);
//繪制內(nèi)圓
context.moveTo(194,100);//將繪圖游標(biāo)移動(dòng)到（x,y），不畫線
context.arc(100,100,94,0,2*Math.PI,false);
//繪制分針
context.moveTo(100,100);
context.lineTo(100,15);
//繪制時(shí)針
context.moveTo(100,100);
context.lineTo(35,100);
context.strokeStyle="rgba(0,0,255,0.5)";
//最后必須調(diào)用stroke()方法，這樣才能把圖像繪制到畫布上。
context.stroke();
}
</script>
</body>
</html>
（4）、繪制文本
繪制文本主要有兩個(gè)方法：fillText()和strokeText()。這兩個(gè)方法接收4個(gè)參數(shù)：要繪制的文本字符串、x坐標(biāo)，y坐標(biāo)和可選的最大像素寬度。這兩個(gè)方法有三個(gè)屬性：font、textAlign和textBaseline。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas繪圖</title>
</head>
<body>
<canvas id="drawing" width="200" height="200" style="border:#0F0 solid 1px">A Drawing of something</canvas>
<script>
var drawing=document.getElementById("drawing");
//確定瀏覽器支持<canvas>元素
if(drawing.getContext){
//取得繪圖上下文對(duì)象的引用，“2d”是取得2D上下文對(duì)象
var context=drawing.getContext("2d");
//開始路徑
context.beginPath();
//繪制外圓
context.arc(100,100,99,0,2*Math.PI,false);
//繪制內(nèi)圓
context.moveTo(194,100);//將繪圖游標(biāo)移動(dòng)到（x,y），不畫線
context.arc(100,100,94,0,2*Math.PI,false);
//繪制分針
context.moveTo(100,100);
context.lineTo(100,20);
//繪制時(shí)針
context.moveTo(100,100);
context.lineTo(35,100);
//添加文字“12”
context.font="bold 14px Arial";
context.textAlign="center";
context.textBaseline="middle";//文本的基線
context.fillText("12",100,15);
context.strokeStyle="rgba(0,0,255,0.5)";
//最后必須調(diào)用stroke()方法，這樣才能把圖像繪制到畫布上。
context.stroke();
}
</script>
</body>
</html>
（5）、變換
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas繪圖</title>
</head>
<body>
<canvas id="drawing" width="200" height="200" style="border:#0F0 solid 1px">A Drawing of something</canvas>
<script>
var drawing=document.getElementById("drawing");
//確定瀏覽器支持<canvas>元素
if(drawing.getContext){
//取得繪圖上下文對(duì)象的引用，“2d”是取得2D上下文對(duì)象
var context=drawing.getContext("2d");
//開始路徑
context.beginPath();
//縮放圖像
/*scale(scaleX,scaleY):縮放圖像，在x方向乘以scaleX，在y方向乘以scaleY。
scaleX和scaleY的默認(rèn)值都是1.0
*/
context.scale(0.8,0.8);
//繪制外圓
context.arc(100,100,99,0,2*Math.PI,false);
//繪制內(nèi)圓
context.moveTo(194,100);//將繪圖游標(biāo)移動(dòng)到（x,y），不畫線
context.arc(100,100,94,0,2*Math.PI,false);
//變換原點(diǎn)
/*translate(x,y):將坐標(biāo)原點(diǎn)移動(dòng)到（x,y）。執(zhí)行這個(gè)變換后，坐標(biāo)(0,0)會(huì)變成之
前由(x,y)表示的點(diǎn)
*/
context.translate(100,100);
//添加文字“12”
context.font="bold 14px Arial";
context.textAlign="center";
context.textBaseline="middle";//文本的基線
context.fillText("12",0,-85);
//旋轉(zhuǎn)表針
/*rotate(angle):圍繞原點(diǎn)旋轉(zhuǎn)圖像angle弧度*/
context.rotate(1);
//繪制分針
context.moveTo(0,0);
context.lineTo(0,-80);
//繪制時(shí)針
context.moveTo(0,0);
context.lineTo(-65,0);
context.strokeStyle="rgba(0,0,255,0.5)";
//最后必須調(diào)用stroke()方法，這樣才能把圖像繪制到畫布上。
context.stroke();
}
</script>
</body>
</html>
（6）、繪制圖像
var drawing=document.getElementById("drawing");
//確定瀏覽器支持<canvas>元素
if(drawing.getContext){
//取得繪圖上下文對(duì)象的引用，“2d”是取得2D上下文對(duì)象
var context=drawing.getContext("2d");
var image=document.getElementById("image");
context.drawImage(image,10,10,20,20);//起點(diǎn)為(10,10)，圖像大小會(huì)變成20x20像素；
}
（7）、陰影
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas繪圖</title>
</head>
<body>
<canvas id="drawing" width="200" height="200" style="border:#0F0 solid 1px">A Drawing of something</canvas>
<script>
var drawing=document.getElementById("drawing");
//確定瀏覽器支持<canvas>元素
if(drawing.getContext){
//取得繪圖上下文對(duì)象的引用，“2d”是取得2D上下文對(duì)象
var context=drawing.getContext("2d");
//設(shè)置陰影
context.shadowColor="rgba(0,0,0,0.5)"http://設(shè)置陰影顏色
context.shadowOffsetX=5;//設(shè)置形狀或路徑x軸方向的陰影偏移量，默認(rèn)值為0；
context.shadowOffsetY=5;//設(shè)置形狀或路徑y(tǒng)軸方向的陰影偏移量，默認(rèn)值為0；
context.shadowBlur=4;//設(shè)置模糊的像素?cái)?shù)，默認(rèn)值為0，即不模糊。
//繪制紅色矩形
context.fillStyle="red";
context.fillRect(10,10,50,50);
//繪制半透明的藍(lán)色矩形
context.fillStyle="rgba(0,0,255,1)";
context.fillRect(30,30,50,50);
}
</script>
</body>
</html>
（8）、漸變
漸變由CanvasGradient實(shí)例表示，很容易通過2D上下文來創(chuàng)建和修改。要?jiǎng)?chuàng)建一個(gè)新的先行漸變，可以調(diào)用createLinearGradient()方法。這個(gè)方法接收4個(gè)參數(shù)：起點(diǎn)的x坐標(biāo)，起點(diǎn)的y坐標(biāo)，終點(diǎn)的x坐標(biāo)，終點(diǎn)的y坐標(biāo)。創(chuàng)建漸變對(duì)象后，下一步就是使用addColorStop()方法來指定色標(biāo)，這個(gè)方法接收兩個(gè)參數(shù)：色標(biāo)位置和css顏色值。色標(biāo)位置是一個(gè)0（開始的顏色）到1（結(jié)束的顏色）之間的數(shù)據(jù)。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas繪圖</title>
</head>
<body>
<canvas id="drawing" width="200" height="200" style="border:#0F0 solid 1px">A Drawing of something</canvas>
<script>
var drawing=document.getElementById("drawing");
//確定瀏覽器支持<canvas>元素
if(drawing.getContext){
//取得繪圖上下文對(duì)象的引用，“2d”是取得2D上下文對(duì)象
var context=drawing.getContext("2d");
//設(shè)置漸變
var gradient=context.createLinearGradient(30,30,70,70);
gradient.addColorStop(0,"white");
gradient.addColorStop(1,"black");
//繪制紅色矩形
context.fillStyle="red";
context.fillRect(10,10,50,50);
//繪制漸變矩形
context.fillStyle=gradient;
context.fillRect(30,30,50,50);
}
</script>
</body>
</html>
為了確保漸變與形狀對(duì)齊，有時(shí)候可以考慮使用函數(shù)來確保坐標(biāo)合適，例如：
function createRectLinearGradient(context,x,y,width,height){
return context.createLinearGradient(x,y,x+width,y+height);
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas繪圖</title>
</head>
<body>
<canvas id="drawing" width="200" height="200" style="border:#0F0 solid 1px">A Drawing of something</canvas>
<script>
var drawing=document.getElementById("drawing");
//確定瀏覽器支持<canvas>元素
if(drawing.getContext){
//取得繪圖上下文對(duì)象的引用，“2d”是取得2D上下文對(duì)象
var context=drawing.getContext("2d");
//設(shè)置漸變
var gradient=createRectLinearGradient(context,30,30,50,50);
gradient.addColorStop(0,"white");
gradient.addColorStop(1,"black");
//繪制紅色矩形
context.fillStyle="red";
context.fillRect(10,10,50,50);
//繪制漸變矩形
context.fillStyle=gradient;
context.fillRect(30,30,50,50);
}
//確保漸變與形狀對(duì)齊
function createRectLinearGradient(context,x,y,width,height){
return context.createLinearGradient(x,y,x+width,y+height);
}
</script>
</body>
</html>
要?jiǎng)?chuàng)建徑向漸變（或放射漸變），可以使用createRadialGradient()方法，這個(gè)方法接收6個(gè)參數(shù)，對(duì)應(yīng)著兩個(gè)圓的圓心和半徑，
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas繪圖</title>
</head>
<body>
<canvas id="drawing" width="200" height="200" style="border:#0F0 solid 1px">A Drawing of something</canvas>
<script>
var drawing=document.getElementById("drawing");
//確定瀏覽器支持<canvas>元素
if(drawing.getContext){
//取得繪圖上下文對(duì)象的引用，“2d”是取得2D上下文對(duì)象
var context=drawing.getContext("2d");
//設(shè)置漸變
var gradient=context.createRadialGradient(55,55,10,55,55,30);
gradient.addColorStop(0,"white");
gradient.addColorStop(1,"black");
//繪制紅色矩形
context.fillStyle="red";
context.fillRect(10,10,50,50);
//繪制漸變矩形
context.fillStyle=gradient;
context.fillRect(30,30,50,50);
}
</script>
</body>
</html>
（9）、模式
模式其實(shí)就是重復(fù)的圖像，可以用來填充或描邊圖形
var drawing=document.getElementById("drawing");
//確定瀏覽器支持<canvas>元素
if(drawing.getContext){
//取得繪圖上下文對(duì)象的引用，“2d”是取得2D上下文對(duì)象
var context=drawing.getContext("2d");
var image=document.images[0];
pattern=context.createPattern(image,"repeat");
context.fillStyle=pattern;
context.fillRect(10,10,150,150);
}
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Bootstrap彈出帶合法性檢查的登錄框?qū)嵗a【推薦】
這篇文章主要介紹了Bootstrap彈出帶合法性檢查的登錄框?qū)嵗a【推薦】的相關(guān)資料,需要的朋友可以參考下2016-06-06
Javascript封裝DOMContentLoaded事件實(shí)例
這篇文章主要介紹了Javascript封裝DOMContentLoaded事件實(shí)例,DOMContentLoaded是FF,Opera 9的特有的Event, 當(dāng)所有DOM解析完以后會(huì)觸發(fā)這個(gè)事件,需要的朋友可以參考下2014-06-06
JavaScript webpack模塊打包器如何優(yōu)化前端性能
本系列主要整理前端面試中需要掌握的知識(shí)點(diǎn)。本節(jié)介紹webpack如何優(yōu)化前端性能，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
js實(shí)現(xiàn)數(shù)字每三位加逗號(hào)的方法
這篇文章主要介紹了js實(shí)現(xiàn)數(shù)字每三位加逗號(hào)的方法,以實(shí)例形式講述了js實(shí)現(xiàn)數(shù)字每三位加逗號(hào)的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
JavaScript如何獲取到導(dǎo)航條中HTTP信息
這篇文章主要為大家詳細(xì)介紹了JavaScript如何獲取到導(dǎo)航條中HTTP信息，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
詳解JavaScript數(shù)據(jù)類型和判斷方法
這篇文章主要介紹了JavaScript數(shù)據(jù)類型和判斷方法的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2020-09-09
深拷貝和淺拷貝是面試中經(jīng)常出現(xiàn)的,主要考察對(duì)基本類型和引用類型的理解深度,這篇文章主要給大家介紹了關(guān)于js深拷貝和淺拷貝的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了微信小程序如何連接Java后臺(tái),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
webpack打包時(shí)如何修改文件名的實(shí)現(xiàn)示例
本文主要介紹了webpack打包時(shí)如何修改文件名的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
不用一行代碼和一句提示語就搞定整個(gè)表單驗(yàn)證,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10