5. APIs

Canvas 繪圖

1. 使用方法:

<html>

<body>

// 在HTML內寫入canvas標籤

// 而width和height的屬性也可在JavaScript內做更動,

// 不過一旦重新填入這些屬性值,Canvas的內容就會全部清空

<canvas id="canvas1" width="300" height="400"></canvas>

<script type="text/javascript">

           // 取得canvas元素的DOM物件

           var canvas = document.getElementById("canvas1");

           // 利用getContext()方法取得繪圖環境

           var context = canvas.getContext("2d");

           // 透過呼叫繪圖環境(context)的方法,就能在Canvas繪圖

</script>

</body>

</html>

圖:Canvas的座標系統


2. 繪製四邊形

  • strokeRect(x, y, w, h):繪出四邊形的邊框
  • fillRect(x, y, w, h):繪出填色的四邊形(不描邊框)
  • clearRect(x, y, w, h):清除指定的四邊行區域

x, y為座標起始位置,w為四邊形的寬,h為四邊形的高。

 

3. 繪製圖像

  • drawImage(image, dx, dy):畫出原始尺寸的圖片
  • drawImage(image, dx, dy, dw, dh):指定圖片的尺寸與位置
  • drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh):只顯示原始圖片的某一部份

sx, sy以原始圖片的左上角開始算起,當作起點切割出一塊sw, sh的四邊形顯示在dx, dy的位置,尺寸是dw, dh。

 

drawImage()的第一個參數可以是以下幾種物件:

  • img元素的DOM物件
  • video元素的DOM物件
  • canvas元素的DOM物件

 

<html>

<body>

<canvas id="canvas1" width="300" height="400"></canvas>

<script type="text/javascript">

           // 取得canvas元素的DOM物件 

           var canvas = document.getElementById("canvas1");

           // 利用getContext()方法取得繪圖環境 

           var context = canvas.getContext("2d");

           // 產生image元素 

           var image = new Image();

           // 須先讀取圖片,才能執行圖片寫入在canvas 

           image.onload = function() {

                     // canvas顯示圖片 

                     context.drawImage(image, 10, 10, 100, 100, 0, 0, canvas.width, canvas.height);

           }

           // 讀取圖片 

           image.src = "test.jpg";

</script>

</body>

</html>


3. 繪製線條或圖形

3.1 步驟

  1. beginPath():呼叫此方法即可開始繪製路徑,在此之前的路徑將被刪除。
  2. 利用Canvas的API描繪路徑
  3. 利用stroke()或是fill()顯示圖形:stroke()讓路徑以線的方式顯示出來;fill()會將路徑內部填滿,若路徑並無閉合,則它將會自動連接起來。

 

3.2 描繪子路徑的API

  • 移動路徑起始點的座標:moveTo(x, y)
  • 描繪直線:lineTo(x, y)
  • 描繪二次貝茲曲線:quadraticCurveTo(cpx, cpy, x, y)
  • 描繪三次貝茲曲線:bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
  • 描繪直線與圓弧:arcTo(x1, y1, x2, y2, radius)
  • 繪製圓弧:arc(x, y, radius, strartAngle, endAngle, anticlockwise),anticlockwise表示描繪方向,true為逆時針,false反之
  • 四邊形:rect(x, y, w, h)
  • 閉合路徑:closePath()

 

context.beginPath();

context.moveTo(0, 0);

// 描繪直線

context.lineTo(50, 50);

context.moveTo(0, 50);

// 描繪二次貝茲曲線

context.quadraticCurveTo(50, 150, 100, 50);

context.moveTo(0, 100);

// 描繪三次貝茲曲線

context.bezierCurveTo(0, 200, 100, 100, 100, 200);

context.moveTo(0, 200);

// 描繪直線與圓弧

context.arcTo(25, 275, 100, 200, 25);

context.stroke();

 

3.3 利用路徑產生顯示圖形的API

  • stroke()
  • fill()
  • clip():利用路徑進行裁切的功能

 

4. 漸層
  • createLinearGradient(x0, y0, x1, y1):作線性漸層
  • createRadialGradient(x0, y0, r0, x1, y1, r1):作圓形漸層
  • addColorStop(offset, color):加入漸層點,offset為0.0~1.0

 

參考書籍:HTML5&API網頁程式設計

 


Rich Text 文字編輯


Commucation API


Drag & Drop API 拖曳


Web Sockets

簡介

        HTTP 上的溝通模式不外乎 瀏覽器Request 與伺服器端的 Response,一直以來對於雙向全雙工的通信架構有缺陷。而web sockets的誕生,讓雙方都可以在任意的時間點進行資料傳送,實現『Server Data Push』,不僅讓網頁應用程式的即時性大幅提昇,也因此讓新應用的系統也能因應而生。

 

架構圖 

 

 

 

 

應用demo:Chat room

參考連結

 

http://html5demos.com/

http://dev.w3.org/html5/websockets/

http://www.javaworld.com.tw/jute/post/view?bid=6&id=273319