HTML5 Canvas――用路徑描畫(huà)線(xiàn)條實(shí)例介紹

2024-09-05 07:20:20

字體：大中小

供稿：網(wǎng)友

原文：
http://www.lifelaf.com/blog/?p=371
本文翻譯自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 2, “Using Paths to Create Lines”

對(duì)于HTML5 Canvas，我們可以使用“路徑”來(lái)描畫(huà)任何圖形。路徑，簡(jiǎn)單來(lái)說(shuō)就是一系列的點(diǎn)以及連接這些點(diǎn)的線(xiàn)。任何Canvas上下文只會(huì)有一個(gè)“當(dāng)前路徑”，而當(dāng)context.save()調(diào)用時(shí)，該“當(dāng)前路徑”并不會(huì)被保存。

路徑的開(kāi)始與結(jié)束

調(diào)用beginPath()可以開(kāi)始一個(gè)路徑，而調(diào)用closePath()則會(huì)令該路徑結(jié)束。如果連接路徑中的點(diǎn)，那么這種連接就構(gòu)成了一個(gè)“子路徑”。如果“子路徑”中最后一個(gè)點(diǎn)與其自身的第一個(gè)點(diǎn)相連，我們就認(rèn)為該“子路徑”是“閉合”的。

線(xiàn)條的描繪

最基本的路徑操作由反復(fù)調(diào)用moveTo()和lineTo()命令組成。比如以下這個(gè)例子：

復(fù)制代碼

上一篇：html5的畫(huà)布canvas――畫(huà)出簡(jiǎn)單的矩形、三角形實(shí)例代碼

下一篇：利用HTML5畫(huà)出一個(gè)坦克的形狀具體實(shí)現(xiàn)代碼