]]>
]]>
鍦ㄥ墠涓綃囧崥瀹腑錛屾垜浠祴璇曚簡 canvas 鏍囩鐨勭敤娉曪紝騫跺緱鍒頒簡 canvas 鏍囩鐨勬覆鏌撲笂涓嬫枃瀵硅薄錛?浣嗘槸騫舵病鏈夌敤瀹冪粯鍒朵換浣曞浘褰€傚湪榪欎竴綃囦腑錛屾垜浠厛浜嗚В涓涓婬TML5緇樺浘鐨勪竴浜涘熀紜姒傚康錛岀劧鍚庡啀鏉ョ敾鍑犱釜鍥懼艦鐜╃帺銆?/p>
涓銆佸潗鏍囩郴
鍏跺疄鍙鐜╄繃涓鐐圭偣鍥懼艦緙栫▼鐨勪漢閮界煡閬擄紝鐢?shù)鑴戜笂鐨勫潗鏍嚲p誨拰鏁板涓婄殑鍧愭爣緋葷◢寰湁鐐逛笉鍚岋紝鍧愭爣鐨勫師鐐瑰湪緇樺埗鍖哄煙錛堣繖閲屾槸Canvas錛夌殑宸︿笂瑙掞紝X杞存鍚戞湞鍙籌紝Y杞存鍚戞湞涓嬶紝濡備笅鍥?/p>
澹版槑錛?/strong>涓烘湰鏂囦負(fù)鍘熷垱鏂囩珷錛屼綔鑰呬繚鐣欐墍鏈夋潈鍒╋紒嬈㈣繋杞澆錛岃漿杞借娉ㄦ槑浣滆?font color="#ff0000">宸︽錘鍜屽嚭澶?font color="#ff0000">鍗氬鍥?/strong>
浜屻丼troke 鍜?Fill
HTML5涓皢鍥懼艦鍒嗕負(fù)涓ゅぇ綾伙細(xì)
絎竴綾葷О浣?Stroke錛屾垜鐨勭悊瑙ｅ氨鏄疆寤撱佸嬀鍕掓垨鑰呯嚎鏉★紝鎬諱箣錛屽浘褰㈡槸鐢辯嚎鏉＄粍鎴愮殑錛?/p>
絎簩綾葷О浣?Fill錛屽氨鏄～鍏呭尯鍩?/p>
涓婁笅鏂囧璞′腑鏈変袱涓粯鍒剁煩褰㈢殑鏂規(guī)硶錛屽彲浠ヨ鎴戜滑寰堝ソ鐨勭悊瑙ｈ繖涓ゅぇ綾誨浘褰㈢殑鍖哄埆錛?/p>
涓涓槸 strokeRect錛岃繕鏈変竴涓槸 fillRect
涓嬮潰鐨勪唬鐮佸垎鍒敤榪欎袱涓柟娉曟潵緇樺埗鐭╁艦錛屼綘鍙互鍒嗗埆鐐瑰嚮涓や釜鎸夐挳鏉ョ湅鐪嬫湁浠涔堜笉鍚岋紝浠庤岀悊瑙?stroke 鍜?fill 鐨勫尯鍒?/p>
璁劇疆鐢誨竷
<input type="button" value="strokeRect" onclick="strokeRect();"/>
<input type="button" value="fillRect" onclick="fillRect();"/>
strokeRect 鍜?fillRect
var canvas = document.getElementById('test1');
var ctx=canvas.getContext("2d");
ctx.clearRect(0,0,200,200);
ctx.strokeStyle="blue";
ctx.strokeRect(10,10,180,180);
}
function fillRect(){
var canvas = document.getElementById('test1');
var ctx=canvas.getContext("2d");
ctx.clearRect(0,0,200,200);
ctx.fillStyle="blue";
ctx.fillRect(10,10,180,180);
}
涓夈侀鑹?/strong>
涓婁笅鏂囧璞℃湁涓や釜灞炴у彲浠ョ敤鏉ヨ緗鑹詫細(xì)strokeStyle 鍜?fillStyle
strokeStyle 鐨勫煎喅瀹氫簡浣犲綋鍓嶈緇樺埗鐨勭嚎鏉＄殑棰滆壊
fillStyle 鐨勫煎喅瀹氫簡浣犲綋鍓嶈濉厖鐨勫尯鍩熺殑棰滆壊
棰滆壊鍊煎簲璇ユ槸絎﹀悎CSS3 棰滆壊鍊兼爣鍑?/a>鐨勬湁鏁堝瓧絎︿覆銆備笅闈㈢殑渚嬪瓙閮借〃紺哄悓涓縐嶉鑹層?/p>
ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";
鍏充簬棰滆壊錛屼互鍚庝細(xì)鏈夋洿澶氱殑璇存槑銆?/p>
鍥涖佸熀鏈粯鍥?/strong>
闄や簡涓婇潰緇欏嚭鐨勪袱涓粯鍒剁煩褰㈢殑鏂規(guī)硶澶栵紝涓婁笅鏂囧璞¤繕鏈夊嚑涓柟娉曞彲浠ョ敤鏉ョ粯鍒朵竴浜涘熀鏈浘褰紝濡備笅錛?/p>
moveTo(x,y)錛歮oveTo鏂規(guī)硶騫朵笉鑳界敾鍑轟換浣曚笢瑗匡紝瀹冨彧鏄皢鐢葷瑪鐨勫綋鍓嶇偣縐誨姩鍒?x,y)澶?/p>
lineTo(x,y)錛氫粠褰撳墠鐐瑰埌錛坸,y錛夌偣緇樺埗涓鏉＄洿綰褲傛敞鎰忥細(xì)緇樺埗瀹屾垚鍚庯紝褰撳墠鐐瑰氨鍙樻垚浜?x,y)錛岄櫎闈炰綘鐢?moveTo 鏂規(guī)硶鍘繪敼鍙樹粬
arc(x, y, radius, startAngle, endAngle, anticlockwise) 錛氱粯鍒朵竴鏉″姬綰?/p>
quadraticCurveTo(cp1x, cp1y, x, y)
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 錛氳繖涓や釜鏂規(guī)硶閮芥槸緇樺埗璐濆彾鏂洸綰匡紝鍏蜂綋鐢ㄦ硶鐪嬪弬鑰冩墜鍐?/p>
rect(x, y, width, height) 錛氱粯鍒朵竴涓煩褰€傛敞鎰忥細(xì) 褰撳畠琚皟鐢ㄦ椂錛宮oveTo 鏂規(guī)硶浼?xì)鑷姩琚皟鐢ㄥQ屽弬鏁頒負(fù)(0,0)錛屼簬鏄搗濮嬪潗鏍囧張鎭㈠鎴愬垵濮嬪師鐐逛簡銆?
鏈変簡鐩寸嚎銆佸姬綰褲佹洸綰褲佹柟褰㈠拰鍦嗗艦榪欏嚑縐嶅熀鏈浘褰紝鎴戜滑灝卞彲浠ョ粍鍚堝嚭鏇村鏉傜殑鍥懼艦浜?/p>
浜斻佺悊瑙ｇ粯鍒惰礬寰?Drawing Path
涓婁竴綃囨枃绔犱腑璇磋繃錛屾垜浠粯鍒剁殑鍥懼艦鏄厛緇樺埗鍒頒竴涓娊璞＄殑涓婁笅鏂囧璞′腑錛堝叾瀹炲氨鏄唴瀛樹腑錛夛紝鐒跺悗鍐嶅皢涓婁笅鏂囧璞¤緭鍑哄埌鏄劇ず璁懼涓婏紝榪欎釜杈撳嚭鍒版樉紺鴻澶囩殑榪囩▼涓嶉渶瑕佹垜浠搷蹇冦備絾鏄湁鏃跺欐垜浠茍涓嶆兂绔嬪埢杈撳嚭姣忎竴嬈＄粯鍒跺姩浣滐紝涔熻鎴戞兂璁╀竴緇勭粯鍒跺姩浣滃畬鎴愪互鍚庯紝鍐嶉泦涓竴鍧楄緭鍑猴紝 姣斿涓涓洿媯嬫鐩樻湁19×19鏉＄洿綰跨粍鎴愶紝姝ｅ父鎯呭喌涓嬮渶瑕佸悜鎯蟲樉紺鴻澶囪緭鍑?9×19嬈★紝浣嗘槸濡傛灉鎴戜滑鍏堟殏鍋滃悜鏄劇ず璁懼杈撳嚭錛岀瓑鍦ㄤ笂涓嬫枃涓紙鍐呭瓨涓級鍏ㄩ儴緇樺埗瀹屾垚19×19鏉＄洿綰挎椂錛屽啀鍚戞樉紺鴻澶囪緭鍑猴紝鍙渶瑕佽緭鍑轟竴嬈″氨鍙互浜嗐?/p>
榪欑鎯呭喌鍦℉TML5涓彨鍋氱粯鍒惰礬寰勶紝瀹冪敱鍑犱釜涓婁笅鏂囧璞＄殑鏂規(guī)硶緇勬垚錛?/p>
beginPath() 錛氬紑濮嬭礬寰勶紝鎰忔濆氨鏄湪浣犺皟鐢ㄨ繖涓柟娉曞悗錛屼綘緇樺埗鐨勫浘褰㈠氨涓嶄細(xì)鍐嶅悜灞忓箷杈撳嚭浜嗭紝鑰屽彧鏄敾鍒頒簡涓婁笅鏂囧璞′腑錛堝唴瀛樹腑錛?/p>
stroke() 錛氬皢浣犺皟鐢?beginPath 鏂規(guī)硶浠ュ悗緇樺埗鐨勬墍鏈夌嚎鏉★紝涓嬈℃ц緭鍑哄埌鏄劇ず璁懼涓?/p>
closePath() 錛氬鏋滀綘璋冪敤 beginPath 鏂規(guī)硶浠ュ悗錛屽湪涓婁笅鏂囧璞′腑榪涜浜嗕竴緋誨垪鐨勭粯鍒訛紝浣嗘槸寰楀埌鐨勫浘褰㈡槸涓嶉棴鍚堢殑錛岃繖涓柟娉曞皢浼?xì)甯綘琛ヤ笂鏈鍚庝竴鏉＄洿綰匡紝灝嗕綘鐨勫浘褰㈤棴鍚堣搗鏉ャ?/p>
娉ㄦ剰錛?/span>closePath騫朵笉鍚戝睆騫曡緭鍑哄浘褰紝鑰屽彧鏄湪涓婁笅鏂囧璞′腑琛ヤ笂涓鏉＄嚎錛岃繖涓楠や笉鏄繀闇鐨?/u>銆?/p>
fill() 錛?/p>
濡傛灉浣犵殑緇樺埗璺緞緇勬垚鐨勫浘褰㈡槸灝侀棴鐨勶紝榪欎釜鏂規(guī)硶灝嗙敤 fillStyle 璁劇疆鐨勯鑹插～鍏呭浘褰紝鐒跺悗绔嬪嵆鍚戝睆騫曡緭鍑猴紱 濡傛灉緇樺埗璺緞涓嶆槸灝侀棴鐨勶紝榪欎釜鏂規(guī)硶浼?xì)鍏垶畣鍥惧舰闂悎钃v鏉ワ紝鐒跺悗鍐嶅～鍏呰緭鍑恒?/p>
娉ㄦ剰錛?/strong>鎵鏈夌殑 fill 鍥懼艦錛屽 fillRect 絳夛紝閮芥槸绔嬪埢鍚戝睆騫曡緭鍑虹殑錛屼粬浠病鏈夌粯鍒惰礬寰勮繖涓蹇?/u> 涓嬮潰鐨勪唬鐮佸皢緇樺埗涓涓畝鍗曠殑濉厖涓夎褰€?/p>
娉ㄦ剰錛?/span>緇樺埗涓夎褰㈢殑鏃跺欙紝榛樿鐨勮儗鏅壊涓虹櫧鑹詫紝榛樿鐨勫墠鏅壊涓洪粦鑹?/u>銆?/p>
鍏佸崐涓崟浣嶇殑鍧愭爣 榪欓噷榪樿鍥炶繃澶存潵璇磋鍧愭爣錛屼笅闈㈢殑浠ｇ爜鏄湪鐢誨竷涓婄粯鍒剁綉鏍鹼紝鐐瑰嚮“鐢葷綉鏍?#8221;鎸夐挳鍙互鐪嬭鏁堟灉 榪欐浠ｇ爜涓紝鏈変竴澶勫鎬殑鍦版柟錛屽氨鏄潗鏍囧驚鐜槸浠?.5寮濮嬬殑錛岃繖鏄負(fù)浠涔堝憿錛?/p>
濡備笅鍥撅紝鍋囧鎴戞兂緇樺埗涓鏉′粠(1,0)鍒?1,3)鐨勭嚎錛岀敱浜庣嚎鐨勯粯璁ゅ搴︽槸涓涓儚绱狅紝鎵浠ュ湪鎴戞兂璞′腑搴旇緇樺埗鎴?strong style="color: #339966">娣辯豢鑹?/u>鐨勯儴鍒嗭紝鍗沖湪鍧愭爣 1 涓よ竟鍚勫崰鍗婁釜鍍忕礌鐨勫搴︺?/p>
鐒惰岋紝嫻忚鍣ㄧ殑鏈灝忓崟浣嶆槸涓涓儚绱狅紝鎵浠ヤ粬浼?xì)鍚戜袱杈规墿灞曞Q屽疄闄呯粯鍒跺嚭鏉ョ殑嫻呯豢鑹?/u>鐨勯儴鍒嗭紝鍗沖崰鐢ㄤ簡涓や釜鍍忕礌鐨勫搴︺傝繖鏍鳳紝鎴戜滑緇樺埗鐨勭嚎鏉″湪鍧愭爣涓婂氨涓嶇簿紜簡 濡備笅鍥撅紝濡傛灉鎴戜滑緇欏嚭鐨勮搗濮嬪潗鏍囨槸(1.5,0)鍜?1.5,3)錛岄偅涔堢嚎鏉＄殑瀹藉害鎵嶆槸姝ｇ‘鐨勪竴涓儚绱犮?/p>
涓冦佹竻絀虹敾甯?/strong> 涓婇潰緇欏嚭鐨勪袱孌典唬鐮佷腑錛屾垜浠兘鐢ㄥ埌浜嗘竻絀虹敾甯冿紝鐢ㄥ埌鐨勬柟娉曞涓嬶細(xì) clearRect(x,y,width,height)錛?/p>
瀹冩帴鍙楀洓涓弬鏁幫紝 x 鍜?y 鎸囧畾鐭╁艦宸︿笂瑙?鐩稿浜庡師鐐?鐨勪綅緗紝width 鍜?height 鏄煩褰㈢殑瀹藉拰楂樸傝皟鐢ㄨ鏂規(guī)硶浼?xì)灏喚l欏嚭鐨勭煩褰㈠尯鍩熶腑鎵鏈夌粯鍒跺浘褰㈤兘娓呯┖錛岄湶鍑虹敾甯冪殑鑳屾櫙 澹版槑錛?/strong>涓烘湰鏂囦負(fù)鍘熷垱鏂囩珷錛屼綔鑰呬繚鐣欐墍鏈夋潈鍒╋紒嬈㈣繋杞澆錛岃漿杞借娉ㄦ槑浣滆?font color="#ff0000">宸︽錘鍜屽嚭澶?font color="#ff0000">鍗氬鍥?/strong> //========================================== 璁劇疆鐢誨竷
<input type="button" value="鐢諱笁瑙? onclick="drawTri();"/>
<input type="button" value="娓呴櫎" onclick="clearTri();"/>
緇樺埗涓夎褰?/span>
function drawTri(){
var canvas = document.getElementById('test2');
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();
}
function clearTri(){
var canvas = document.getElementById('test2');
var ctx=canvas.getContext("2d");
ctx.clearRect(0,0,200,200);
}
</script>璁劇疆鐢誨竷
<input type="button" value="鐢葷綉鏍? onclick="drawMap();"/>
<input type="button" value="娓呴櫎" onclick="clearMap();"/>緇樺埗緗戞牸
function drawMap(){
var canvas = document.getElementById('test3');
var ctx=canvas.getContext("2d");
ctx.beginPath();
for (var x = 0.5; x < 500; x += 10) {
ctx.moveTo(x, 0);
ctx.lineTo(x, 375);
}
for (var y = 0.5; y < 375; y += 10) {
ctx.moveTo(0, y);
ctx.lineTo(500, y);
}
ctx.strokeStyle = "#eee";
ctx.stroke();
}
function clearMap(){
var canvas = document.getElementById('test3');
var ctx=canvas.getContext("2d");
ctx.clearRect(0,0,500,375);
}
</script>
]]>
]]>