HTML5 Canvas 入門教程： 第一冊

1、html5 canvas 入門教程： 第一冊是html5里其中一個強大的元素，它能夠用法javascript來制作圖像，動畫，嬉戲，圖表，或其它圖形類的畫像等等。這個教程將描述如何在你的html頁面中用法元素。 這些例子為你提供了一些清楚的思路關于你可以用來做什么以及如何開頭你自己的實踐。這項教程是十分適合全部的初學者，由于它容易，易懂，一學就會。在我們開頭之前，先來看看有哪幾個掃瞄器是支持html5元素：internet explorer （9.0+）safari （3.0+）firefox （3.0+）chrome （3.0+）opera （10.0+）ios （1.0+）android

2、（1.0+）元素看起來和其它的html元素沒什么兩樣。元素惟獨兩個屬性width和height。必需注重的是，每一次用法的時候都必需設置的width和height，那就可以避開在繪制時圖像會浮現(xiàn)扭曲。所以在html文檔里，你的元素將會是如下所示：檢查掃瞄器對的支持性，假如掃瞄器不支持就為用戶提供替換內容或訊息。在我們開頭畫圖之前，我們需要了解一下的畫布坐標（coordinate system）。假如你在這之前有用法過任何其他2d圖形編程語言，那么你應當認識標準的笛卡爾（cartesian）的左上角坐標系統(tǒng)的（0,0），那就是任何圖形坐標都是從左上角開頭數(shù)。例如，假如你想移動一個矩形到右邊，那么

3、你就需要增強x軸值; 反之，假如你想把矩形往下移動，那么你就必需增強y軸值。我們需要依靠javascript來協(xié)助我們在畫布上繪制圖像。元素有一個叫做 getcontext（） 的辦法，這個辦法是用來獲得渲染上下文（rendering context）和它的繪畫功能。getcontext（）惟獨一個參數(shù)，那就是上下文的格式（2d, 或3d）。在本教程里，我們只會專注探討2d的渲染上下文格式。ok, 我們現(xiàn)在就來開頭在空白的畫布上繪制圖形：保存你的文檔，然后用法支持的掃瞄器掃瞄這個文檔，你會看到一個黑色的矩形，如下所示：上面的腳本中包含一個叫做draw（）的函數(shù)。當頁面加載結束的時候就會執(zhí)行這個

4、函數(shù)，而這個函數(shù)里就有一項由提供執(zhí)行繪制矩形的函數(shù) ——fillrect。fillrect函數(shù)包含了四種參數(shù)，分離是左上角（x, y，寬度以及高度。如下所示：很容易對不對？：d 來點更有趣的，讓我們繼續(xù)來改制我們剛創(chuàng)建的矩形。除了fillrect函數(shù)以外，也提供了另外兩種繪制矩形的辦法：分離是strokerect與clearrect。‘strokerect‘函數(shù)讓我們繪制一個矩形的邊框。試看在你的文檔里加入strokerect函數(shù)，如下所示：保存你的文檔，然后用法支持的掃瞄器掃瞄這個文檔，你應當會看到下所示的那樣：我們?yōu)閯倓?chuàng)建的矩形加上了邊框耶！那么下一步呢就是用法剛才提到的’clearrect‘。’clearrect‘函數(shù)是用來清除指定矩形區(qū)域，讓清除部分徹低透亮。試看在你的文檔里加入clearrect函數(shù)，如下所示：再次保存你的文檔，然后用法支持的掃瞄器掃瞄這個文檔，你應當會看到矩形中間的部分變成白色了，下所示的那樣：注：’ strokerect‘與’ clearrect&ls