html5.canvas.教程

ID：5265442

大?。?.03 MB

頁數(shù)：89頁

時間：2017-12-07

資源描述：

《html5.canvas.教程》由會員上傳分享，免費在線閱讀，更多相關內(nèi)容在行業(yè)資料-天天文庫。

1、HTML5Canvas教程原作者：EricRowell原文地址：http://www.html5canvastutorials.com/翻譯：ysm@http://iysm.net譯者注：本文是來自于網(wǎng)絡上的一個教程，英文原版在http://www.html5canvastutorials.com/。原文比較簡單明了，適合初學入門，跟著上面的代碼很快就能學會HTML5的Canvas基本的繪圖功能。本文就是根據(jù)此文翻譯而來，只不過原文中有些地方個人感覺介紹得過于簡單，因此結合其他相關材料，根據(jù)自己的理解，對某些章節(jié)的內(nèi)容

2、略作修改。如有什么不夠準確的地方，請不吝賜教。謝謝。Part1:HTML5Canvas教程基礎篇歡迎來到基礎篇部分。在此，我們將主要看一下HTML5Canvas的基本繪圖功能，包括畫直線、畫路徑、圖形繪制、漸變、模式、圖像和文本。學前準備：在開始基礎教程之前，您首先需要準備一個不太舊的web瀏覽器，比如GoogleChrome，F(xiàn)irefox，Safari，Opera，或者IE9這些都可以。然后您需要對Javascript有一定的熟悉，并且還得有一個文本編輯器，比如notepad。1.1HTML5Canvas1.1.1

3、HTML5Canvas的元素在HTML5頁面里，canvas就是像

，，或之類的一種標簽，所不同的是，canvas需要用Javascript來渲染。要使用canvas，我們就需要在HTML5文件的適當位置添加canvas標簽，然后創(chuàng)建一個Javascript初始化函數(shù)，使這個函數(shù)在頁面加載的時候就執(zhí)行，同時在函數(shù)里用調(diào)用HTML5CanvasAPI在canvas上畫圖就可以了。比如我們像下面這樣添加一個id為myCanvas的canvas標簽：

4、s">然后添加初始化Javascript函數(shù)：

5、vas>HTML5Canvas有關元素的說明上述代碼將在本文后續(xù)中作為HTML5Canvas程序的基本模板。就像其他HTML標簽一樣，我們也可以用canvas標簽的height和width屬性為canvas指定其在頁面上高度和寬度。在初始化Javascript函數(shù)中，我們可以用canvas標簽的id獲得canvas的DOM對象，并用getContext()方法獲得這個canvas的“2d”上下文對象，其后的繪圖操作都將以此上下文對象為基礎。1.2直線1.2.1畫直線畫直線的功能可以用begi

6、nPath()，moveTo()，lineTo()和stroke()幾個方法的組合來實現(xiàn)。如：效果圖代碼

8、>關于畫直線的有關說明方法beginPath()定義了一個新的路徑繪制動作的開始。方法moveTo()為指定點創(chuàng)建了一個新的子路徑，這個點就變成了新的上下文點。我們可以把moveTo()方法看成用來定位我們的繪圖鼠標用的。方法lineTo()以上下文點為起點，到方法參數(shù)中指定的點之間畫一條直線。方法st

此文檔下載收益歸作者所有

溫馨提示：
1. 部分包含數(shù)學公式或PPT動畫的文件，查看預覽時可能會顯示錯亂或異常，文件下載后無此問題，請放心下載。
2. 本文檔由用戶上傳，版權歸屬用戶，天天文庫負責整理代發(fā)布。如果您對本文檔版權有爭議請及時聯(lián)系客服。
3. 下載前請仔細閱讀文檔內(nèi)容，確認文檔內(nèi)容符合您的需求后進行下載，若出現(xiàn)內(nèi)容與標題不符可向本站投訴處理。
4. 下載文檔時可能由于網(wǎng)絡波動等原因無法下載或下載錯誤，付費完成后未能成功下載的用戶請聯(lián)系客服處理。

html5.canvas.教程

html5.canvas.教程

相關文章

相關標簽