canvas是什麼?
canvas是一種HTML標籤，是畫布的概念，基本會使用width、height屬性。搭配JavaScript在網頁上進行繪製圖形、動畫、甚至遊戲。
而canvas的環境是以JavaScript撰寫，學習canvas前建議要有JavaScript的基礎。
canvas預設值
在尚未設定任何屬性前，canvas的預設為：寬300px、高150px、透明區塊。
製作第一個canvas畫布
在HTML裡面建立canvas元素，為了要讓JavaScript抓得到元素，需要先定義id。
<!--html-->
<body>
<canvas id="myCanvas" width="200" height="100"></canvas>
</body>
進入JavaScript部分
//javascript
//從HTML內抓取canvas元素
var canvas = document.getElementById("myCanvas");
//建立繪圖內容
var ctx = canvas.getContext("2d");
這裡使用了第一個canvas的方法(method)：getContext("2d")
getContext()是用來取得畫布的渲染環境、繪圖函數，輸入的參數類型目前只有「2d」一種。
接著打開瀏覽器查看
打開後一片空白是正常的，進入檢查面板，其實會發現已經有一個canvas元素在頁面上了，這樣就建立好畫布的基本設定囉！
在canvas畫布上進行填色
在畫布填色會使用到兩個新的方法：fillStyle、fillRect，兩個要搭配一起使用。
//javascript
//從HTML內抓取canvas元素
var canvas = document.getElementById("myCanvas");
//建立繪圖內容
var ctx = canvas.getContext("2d");
//填滿的內容，可以指定顏色、圖片
ctx.fillStyle ="#1998b8";
//填的範圍
ctx.fillRect(0, 0, 100, 50);
填的範圍是以數值來進行設定，fillRect的前兩個數值為填色的起始點，後兩個數值為結束點
用圖示應該比較清楚，左上角就是前兩個數值(0,0)的位置，寬是第三個數值，越往右數值越大。高是第四個數值，越往下數值越大。
method筆記
fillStyle：用來設定填滿的內容，可以指定顏色、漸層色、圖樣、圖片等等
fillRect：用來指定填滿的範圍，一共要填入四個數值，前兩個為開始位置，後兩個數值為結束的位置
在canvas畫布上畫直線
在畫布上畫直線會使用到兩個新的方法：moveTo、lineTo，以及執行的指令stroke( )，三者要搭配一起使用。
//javascript
//從HTML內抓取canvas元素
var canvas = document.getElementById("myCanvas");
//建立繪圖內容
var ctx = canvas.getContext("2d");
//線條的起始點
ctx.moveTo(10, 10);
//線條的結束點
ctx.lineTo(100, 10);
//開始畫線
ctx.stroke();
我設定從(10,10)的位置開始畫向(100,10)的位置，前者的數值代表水平方向，從10開始往右到100的位置。後者數值代表垂直方向，而開始與結束的數值相同，就表示這是一條水平的線。
不只是直線，也可以畫斜線，
把結束點參數調整成(50,50)，畫面中的線段就會變成一條斜線囉！
//javascript
//從HTML內抓取canvas元素
var canvas = document.getElementById("myCanvas");
//建立繪圖內容
var ctx = canvas.getContext("2d");
//線條的起始點
ctx.moveTo(10, 10);
//線條的結束點
ctx.lineTo(50, 50);
//開始畫線
ctx.stroke();
method筆記
moveTo：線段的起始點，以(x,y)進行表示
lineTo：線段的結束點，以(x,y)進行表示
留言列表
