iT邦幫忙

DAY 26
5

===============================================
本系列文章已經集結出書
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

===============================================
本系列文章已經集結出書
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


上一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#25-- 自適應使用者介面 #2
下一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#27-- 將使用者介面(UI)變成動畫 ( CSS動畫 )
系列文
MIS2000Lab.的「HTML5 認證考試,從零開始」--菜鳥的30天馬拉松30

2 則留言

0
oxxo
iT邦研究生 2 級 ‧ 2014-10-22 01:22:06

MIS2000Lab 大大真是過獎了~
圖形真是很有趣的呀哈哈~ ^_^

0
mis2000lab
iT邦好手 1 級 ‧ 2014-10-22 08:20:54

圖形,對我來說好難,不知道是否我沒有好的工具?
我只用網頁編輯器來做

還是後端程式碼(搭配資料庫)我比較上手 :-P

我要留言

立即登入留言