HTML DOM 快速導覽 - CanvasRenderingContext2D 物件

CanvasRenderingContext2D 為 HTML 5 內嵌元素 (embedded content) <canvas> 的 getContext() 方法所回傳的物件 (object) ，擁有各種繪圖相關的屬性 (attribute) 與方法 (method) ，如下表

類型名稱說明
參考canvas對 <canvas> 物件的參考
狀態save()儲存目前的繪圖狀態
restore()回復 save() 所儲存的繪圖狀態
變形scale()縮放圖形
rotate()旋轉圖形
translate()位移圖形
transform()利用矩陣使圖片變形
setTransform()重新設置單位矩陣，然後呼叫 transform() 使圖片變形
合成globalAlpha設置圖片的透明度
globalCompositeOperation設置圖形的重疊規則
顏色與樣式strokeStyle設定線條顏色
fillStyle設定填滿形狀的顏色
createLinearGradient()回傳 CanvasGradient 物件，用來設定線狀的漸層顏色
createRadialGradient()回傳 CanvasGradient 物件，用來設定圓形的漸層顏色
CanvasGradient.addColorStop()CanvasGradient 物件設定顏色的方法
createPattern()設定圖形的填充式樣
線條樣式lineWidth設定路徑線條的寬度
lineCap設定路徑線條頂點的樣式
lineJoin設定路徑線條相接的樣式
miterLimit回傳路徑線條的斜接長度
陰影shadowOffsetX設定文字水平方向的陰影
shadowOffsetY設定文字垂直方向的陰影
shadowBlur設定陰影文字的模糊度
shadowColor設定陰影文字的顏色
長方形clearRect()清空指定的長方形區域
fillRect()畫出填滿顏色的長方形
strokeRect()畫出長方形區域的外框
路徑beginPath()啟動繪製路徑的程序
closePath()連結路徑的起點與終點，然後關閉繪製路徑的程序
moveTo()移動目前繪圖路徑到指定座標
lineTo()畫出直線到指定座標
quadraticCurveTo()畫出二次方貝茲曲線
bezierCurveTo()畫出三次方貝茲曲線
arcTo()畫出弧線
rect()畫出矩形
arc()畫出弧線
fill()填滿顏色
stroke()畫出路徑筆劃的顏色
drawSystemFocusRing()
drawCustomFocusRing()
scrollPathIntoView()
clip()剪裁指定的路徑或區域
isPointInPath()
文字font設定文字字型
textAlign設定文字水平對齊方式
textBaseline設定文字基線對齊方式
fillText()畫出文字
strokeText()畫出鏤空字型
measureText()回傳記錄文字度量值的 TextMetrics 物件
圖檔drawImage()畫出圖片檔案
畫素處理createImageData()回傳 ImageData 物件，用以對圖像進行畫素等級的處理動作
getImageData()回傳 ImageData 物件，用以對圖像進行畫素等級的處理動作
putImageData()將 ImageData 物件放回 CanvasRenderingContext2D 之中


舉例如下
function run() {
    var d = document.getElementsByTagName("canvas");
    var c = d[0].getContext("2d");
    c.fillStyle = "rgb(0, 0, 0)";
    c.fillRect(0, 0, 180, 180);
    c.save();
    c.fillStyle = "rgb(127, 127, 27)";
    c.globalAlpha = 0.5;
    c.fillRect(30, 30, 120, 120);
    c.save();
    c.fillStyle = "rgb(255, 255, 255)";
    c.fillRect(20, 20, 140, 140);
    c.restore();
    c.restore(); 
    c.fillRect(65, 65, 50, 50);
}

/* 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：htmldemo096.js
     功能：示範 JavaScript 程式 
     作者：張凱慶
     時間：西元 2011 年 8 月 */


此例用 document 物件的 getElementsByTagName() 方法，取得標籤名稱為 canvas 的 HTMLCollection 物件，文件的第一個 <canvas> 元素亦即該 HTMLCollection 索引值為 0 的物件
var d = document.getElementsByTagName("canvas");
var c = d[0].getContext("2d");


下面呼叫 restore() 兩次，回覆之前儲存的兩次繪圖狀態
c.fillStyle = "rgb(0, 0, 0)";
c.fillRect(0, 0, 180, 180);
c.save();
c.fillStyle = "rgb(127, 127, 27)";
c.globalAlpha = 0.5;
c.fillRect(30, 30, 120, 120);
c.save();
c.fillStyle = "rgb(255, 255, 255)";
c.fillRect(20, 20, 140, 140);
c.restore();
c.restore(); 
c.fillRect(65, 65, 50, 50);


我們以下面的 HTML 文件載入
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM DEMO</title>
<script src="htmldemo096.js" type="text/javascript"></script>
</head>
<body onload="run();">
<canvas id="demo" width="180" height="180"></canvas>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：htmldemo096.html
     功能：示範 JavaScript 程式 
     作者：張凱慶
     時間：西元 2011 年 8 月 -->


瀏覽器 (broswer) 開啟如下



中英文術語對照
內嵌元素embedded content
物件object
屬性attribute
方法method
瀏覽器broswer


您可以繼續參考
HTML 5 範例

HTML 元素物件


相關目錄
HTML DOM 快速導覽
JavaScript 教材
首頁


參考資料
https://developer.mozilla.org/en/DOM/HTMLCanvasElement
https://developer.mozilla.org/en/HTML/Element/canvas
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element
標籤： , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)