Canvas
- 適合開發大型遊戲
- 不是 Media Elements
- IE9 才開始支援
- 繪製 Canvas 需透過 JavaScript 完成,
<canvas>
標籤本身無法繪圖。 - 可將產生的圖像保存為 PNG
HTML5 採用 Canvas 的原因
題庫解析:1-24
無法使用程式的方式來改變,一般格式的圖片,所以需要引入 SVG 和 Canvas。
繪製圖型的指令
- arc
範例
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
屬性
lineJoin
- Create a rounded corner when the two lines meet
- demo
context.lineJoin="bevel|round|miter"
http://www.w3schools.com/tags/canvas_linejoin.asp
資料來源 http://www.w3schools.com/jsref/dom_obj_canvas.asp https://www.youtube.com/watch?v=SwpS6fP1_hE
linecCap
直線的端點設計為圓柱狀