MIS2000Lab.的「HTML5 認證考試，從零開始」#26-- 先進圖形 / Canvas API

DAY 26

MIS2000Lab.的「HTML5 認證考試，從零開始」--菜鳥的30天馬拉松系列第 26 篇

html 網頁設計 asp.net 網頁圖形 api 鐵人賽網頁程式 html5 繪圖 mis2000lab svg canvas html

mis2000lab

2014-10-21 10:46:16

3946 瀏覽

分享至

===============================================
本系列文章已經集結出書
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯

出版商:碁峰
出版日期：2015-04-09

語言:繁體中文
ISBN:9863475750
ISBN-13:9789863475750

PChome http://24h.pchome.com.tw/books/prod/DJAV0S-A90060ASI
博客來 http://www.books.com.tw/products/0010671214
天瓏書局 https://www.tenlong.com.tw/items/9863475750?item_id=1003110
上一篇文章：自適應使用者介面（Adaptive User Interface）#2
http://ithelp.ithome.com.tw/question/10160694

接下來的文章，本來是兩篇跟「圖形」相關的，也就是SVG與Canvas API

但在2014鐵人賽裡面，有一位前輩專心分享SVG，講解的更深入，
所以我推薦各位參與他的文章：http://www.oxxostudio.tw/

當然，您也可以到我的網站看看SVG的介紹內容，HTML5與圖形 -- SVG圖形入門
http://www.dotblogs.com.tw/mis2000lab/archive/2014/09/20/html5_svg_20140920.aspx

所以這一篇我直接跳到Canvas API

HTML5透過SVG（Scalable Vector Graphics）與Microsoft Canvas API提供了先進的圖形功能。
您可以透過上一章介紹之SVG，以<rect>、<ellipse>與<polyline>來展現圖形內容，與使用者的鍵盤與滑鼠觸發的事件來進行互動。

本章介紹的Canvas API與SVG有些許不同，Canvas實踐了兩種基礎功能：<canvas>標籤（元素）與可以操作Canvas的JavaScript。
它提供<canvas>與一系列的JavaScript函數讓您可以在Canvas介面上繪圖。

完整的canvas方法與屬性，可以參閱 http://www.w3schools.com/tags/ref_canvas.asp。

==== 透過Canvas API繪製圖形 =====

Canvas API的效能取決於使用者週邊的「螢幕大小與解析度」，繪製的圖片越大（像素越多）、解析度越高，有可能會變慢。
對於少量的圖片元素卻需求高解析度，上一章介紹的SVG是一個不錯的選擇。

首先，測試使用者的瀏覽器，是否支援Canvas與相關功能？

var canvas = document.getElementById(‘您的canvas標籤的ID’);

if(canvas.getContex)
{  // 可以。
)
else
{  // 不支援。
}

// 或是把上面寫成一列：
var canvas = document.getElementById(‘您的canvas標籤的ID’).getContex;

最基礎的<canvas>用法

<canvas id="myCanvas" 
            width="200" height="100" style="border:1px solid #000000;">
            抱歉，您的瀏覽器不支援HTML5 canvas。
</canvas>

[img=415,486]http://ithelp.ithome.com.tw/upload/images/20141021/201410211038255445c72152561_resize_600.jpg[/img]

Canvas API還提供了

[ul] [li]繪製外框線的.strokeRect()方法。[/li] [li].arc()與.arcTo()，繪製弧度（arc）。詳見範例canvas_03.html（如下圖）。[/li] [li].quadraticCurveTo()，二次貝茲曲線（quadratic Bezier curve）。[/li] [li]. bezierCurveTo ()，三次貝茲曲線（cubic Bezier curve）。[/li][/ul]

[img=415,288]http://ithelp.ithome.com.tw/upload/images/20141021/201410211040145445c78ee0a10_resize_600.jpg[/img]

==== 繪製路徑 ====

[img=415,306]http://ithelp.ithome.com.tw/upload/images/20141021/201410211042145445c806d42d5_resize_600.jpg[/img]

另一個範例，繪製三角形

[img=415,342]http://ithelp.ithome.com.tw/upload/images/20141021/201410211043335445c85533c2f_resize_600.jpg[/img]

==== 漸層（Gradients）與模式（Patterns） ====

[img=415,198]http://ithelp.ithome.com.tw/upload/images/20141021/201410211044415445c899b322b_resize_600.jpg[/img]

==== 轉變形狀（Transforming Shapes） ====

Canvas API提供這些作法來轉變圖形，更完整的屬性與方法可以參閱
http://www.w3schools.com/tags/ref_canvas.asp

不要走開，馬上回來

下一篇文章：MIS2000Lab.的「HTML5 認證考試，從零開始」#27-- 將使用者介面（UI）變成動畫

http://ithelp.ithome.com.tw/question/10160937