Canvas

  • 適合開發大型遊戲
  • 不是 Media Elements
  • IE9 才開始支援
  • 繪製 Canvas 需透過 JavaScript 完成,<canvas> 標籤本身無法繪圖。
  • 可將產生的圖像保存為 PNG

HTML5 採用 Canvas 的原因

題庫解析:1-24

無法使用程式的方式來改變,一般格式的圖片,所以需要引入 SVG 和 Canvas。

繪製圖型的指令

  • arc

範例

html canvas

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

直線的端點設計為圓柱狀

results matching ""

    No results matching ""