最近在學習html5，其中涉及到很關鍵的元素canvas-畫布，在網上**了一些遊戲源代程式設計客棧碼，雖然能看懂，但是想單獨地針對某個功能提取出來還是有難處的，於是乎自己又上網查詢了一些例子，才將超級瑪麗簡單的動畫給實現了。
設計中涉及到的主要的drawimage()函式
（1）drawimage(image,x,y)該方式是最基本的操作方式，具體是指將你整個要操作的影象物件描繪在指定的座標軸上，左上角為（0，0）原點，以此計算你想要程式設計客棧它描繪的位置
（2）drawimage(image,x,y,width,height)該方式是指將你需要操作的影象物件進行縮放，然後描繪到畫板上，width和height就是你希望描繪之後的大小
（3）drawimage(image,sourcex,sourcey,sourcewidth,sourceheight,destx,desty,destwidth,destheight) 這是最為複雜的方式，但是也是相當有用的。它表示在你想要操作的影象物件中，選擇你想要定位的左上角位置（sourcex,sourcey），然後擷取你想要的寬度和高度（s程式設計客棧ourcewidth,sourceheight），將擷取出來的影象描繪到畫板對應的位置（destx,desty）以及對應的範圍（destwidth,destheight）之內。
1.首先程式設計客棧上網找了下超級瑪麗連貫的走路動作的（如下圖）
2.新建乙個html5檔案，此處命名為mario.html，定義canvas元素，開始動畫start按鈕，暫停動畫stop按鈕
3.相關的js函式
本文標題: html5 利用canvas實現超級瑪麗簡單動畫
本文位址: /web/html5/8573.html
HTML5基礎 Canvas元素
1 這是乙個畫布標籤，用於繪製圖形，在網頁中顯示是乙個矩形，沒有內容和邊框，通常放置canvas標籤的時候需要新增乙個id屬性，便於用js進行繪製時讀取該畫布。2 該元素可以設定長寬和邊框樣式，具體 如下 注 canvas是完全沒有繪圖的工作，繪製的工作全部都交給js，canvas僅僅是乙個畫布而已...
HTML5中Canvas的drawText對齊細節
最近接觸的專案中，ui純html5，這可苦了我這個習慣android native控制項的程式設計師，其中畫字對齊的細節部分困擾我很久。anyway，總算是搞定 context物件可以設定以下 text 屬性 font 文字字型，同 cssfont family 屬性 textalign 文字水平對...
HTML5新增畫布元素canvas
canvas元素是乙個正常的html元素，相當於在頁面插入乙個畫布。在標記中設定寬 高屬性，在調整寬 高屬性後裡面的內容不會縮放。但是在css中指定這些屬性，在縮放畫布後，裡面內容也會縮放。預設情況下畫布是透明的，除非你在畫布上繪製了內容，否則是看不到它的。如果你想我證明畫布確實存在，就能看到乙個黑...