花魁直播高品质美女在线视频互动社区 - 花魁直播官方版

 歡迎來(lái)到素材無(wú)憂網(wǎng),按 + 收藏我們
登錄 注冊(cè) 退出 找回密碼

HTML5 Canvas中繪制矩形實(shí)例教程

時(shí)間: 2018-12-14 09:09 閱讀: 作者:素材無(wú)憂網(wǎng)

   本文翻譯自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 2, “The Basic Rectangle Shape”.

  讓我們來(lái)看一下Canvas內(nèi)置的簡(jiǎn)單幾何圖形 — 矩形的繪制。在Canvas中,繪制矩形有三種方法:填充(fillRect)、描邊(StrokeRect)以及清除(clearRect)。當(dāng)然,我們也可以使用“路徑”來(lái)描繪包括矩形在內(nèi)的所有圖形。

  以下是上述三種方法的API:

  1.fillRect(x,y,width,height)。繪制一個(gè)從(x,y)開(kāi)始,寬度為width,高度為height的實(shí)心矩形。

  2.strokeRect(x,y,width,height)。繪制一個(gè)從(x,y)開(kāi)始,寬度為width,高度為height的矩形框。該矩形框會(huì)根據(jù)當(dāng)前設(shè)置的strokeStyle、lineWidth、lineJoin和miterLimit屬性的不同而渲染成不同的樣式。

  3.clearRect(x,y,width,height)。清除從(x,y)開(kāi)始,寬度為width,高度為height的矩形區(qū)域,使之完全透明。

  在調(diào)用上述方法繪制Canvas之前,我們需要設(shè)定填充和描邊的樣式。設(shè)定這些樣式最基本的方法是使用24位色(用16進(jìn)制字符串表示)。以下是一個(gè)簡(jiǎn)單的例子:

  代碼如下: context.fillStyle = "#000000"; context.strokeStyle = "#ff00ff";

  在下面的例子中,填充色設(shè)定為黑色,而描邊色則設(shè)定為紫色:

  代碼如下: function drawScreen() { context.fillStyle = "#000000"; context.strokeStyle = "#ff00ff"; context.lineWidth = 2; context.fillRect(10, 10, 40, 40); context.strokeRect(0, 0, 60, 60); context.clearRect(20, 20, 20, 20); }

  

 

版權(quán)聲明: 本站資源均來(lái)自互聯(lián)網(wǎng)或會(huì)員發(fā)布,如果侵犯了您的權(quán)益請(qǐng)與我們聯(lián)系,我們將在24小時(shí)內(nèi)刪除!謝謝!

轉(zhuǎn)載請(qǐng)注明: HTML5 Canvas中繪制矩形實(shí)例教程

標(biāo)簽:  
相關(guān)文章
模板推薦