[ASP.NET] 十分鐘輕鬆玩HTML5系列– New Tag canvas

  • 2963
  • 0

[ASP.NET] 十分鐘輕鬆玩HTML5系列– New Tag canvas

在HTML5裡提供了一個New Tag canvas,透過canvas tag定義好的畫布區域,讓瀏覽器可以搭配

JavaScript 直接支援繪畫能力。canvas 本身沒有繪畫能力,可以想像它就是一塊畫布,而在這個

畫布上要畫什麼東西,則是利用CanvasRenderingContext2D Object進行,CanvasRenderingContext2D

其背後提供了一組繪製圖形的API。

 

  • 在頁面上定義畫布相當的簡單,其語法如下定義一個300 * 300 方形且背景為淡灰的畫

布區域

<canvas id="democanvas" width="300" height="300" style="background-color:#eee8e8"></canvas>

image

 

  • 接著搭配JavaScript對該畫布進行繪製,這裡簡單以繪製一個笑臉為例

image

image

 

CanvasRenderingContext2D所提供的繪圖API相當的豐富,這裡只是簡單做個介紹,有興趣

的朋友可再自行參閱文件玩玩看囉(http://dev.w3.org/html5/2dcontext/) 微笑

 

 

Ref:

CanvasRenderingContext2D object

HTML DOM CanvasRenderingContext2D 对象

HTML5 canvas arc Method

HTML Canvas 2D Context

HTML5 Canvas

 

若本文對您有所幫助,歡迎轉貼,但請在加註【轉貼】及來源出處,並在附上本篇的超連結,感恩您的配合囉。

By No.18