iT邦幫忙

DAY 9
5

HTML5試試看系列 第 9

[HTML5試試看-9] canvas 與 2d context

Canvas其實只是一個畫布,要怎樣畫上去,靠的是context...今天先來介紹一下2d context,不過2d context是一個獨立的規格,東西非常多,所以沒把握試一遍。沒測試完的話,明天再繼續。
HTML5的Canvas標籤很簡單,他只有兩個屬性跟兩個方法:

  1. width
  2. height
  3. getContext()
  4. toDataURL()

前三個是一定會用到的,我們通常一定會指定canvas的長寬。另外,不使用getContext來取得context,就沒有方法繪圖了。

還是循例寫一個最簡單的canvas,只畫一條線:

<canvas id="canvas" width="100" height="100"></canvas>
<script>
var ctx = document.getElementById('canvas').getContext('2d');
ctx.save();
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.closePath();
ctx.stroke();
ctx.restore();
</script>

再來看一下canvas 2d context有哪些屬性跟方法。首先寫一段測試程式:
ㄜ...貼不下,我放到gist上吧 http://gist.github.com/636627

跑完成式就會看到哪些東西有支援,哪些沒有:

看起來,Chrome7、Safari5.02、IE9 Beta及Firefox4 Beta目前還沒有支援drawFocusRing這個方法(截圖是Chrome),Opera10.63除了這個方法之外,還不支援createImageData方法。(Firefox4 Beta還不支援圓角,也就是border-radius...別人都支援了耶XD

另外,按下按鈕會畫個叉叉:

看起來今天試不完了...先做個簡單的summary好了。
Canvas 2d context的操作大概分成幾群:

  1. 管理狀態:save(), restore()
  2. 變形:scale(), rotate(), translate(), transform(), setTransform()
  3. 畫面組成:globalAlpha, globalCompositionOperation
  4. 色彩與風格:strokeStyle, fillStyle, createLinearGradient(), createRadialGradient(), createPattern()
  5. 線條邊角及組合:lineWidth, lineCap, lineJoin, miterLimit
  6. 陰影:shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor
  7. 方形繪出:clearRect(), fillRect(), strokeRect()
  8. 路徑API:beginPath(), closePath(), moveTo(), lineTo(), quadraticCurveTo(), bezierCurveTo(), arcTo(), rect(), arc(), fill(), stroke(), clip(), isPointInPath()
  9. 焦點管理:drawFocusRing()
  10. 文字:font, textAlien, textBaseline, fillText(), strokeText(), measureText()
  11. 影像:drawImage(), createImageData(), getImageData(), putImageData()

5~8大致尚可以歸類為繪圖,另外的重點就是文字跟影像。(抓的圖裡面還少了createRadialGradient(),不過我懶得再抓一次...毆飛

參賽文章


上一篇
[HTML5試試看-8] video媒體播放
下一篇
[HTML5試試看-10] canvas 與 2d context(續)
系列文
HTML5試試看30

1 則留言

0
SunAllen
iT邦高手 1 級 ‧ 2010-10-21 10:16:52

筆記筆記 這個讚!!

我要留言

立即登入留言