canvas學習01

canvas

1. 必須指定寬高，肯定可繪圖區域的大小

2. canvas標籤裏寫的是瀏覽器不支持canvas時展現的內容

<canvas id="drawing" width="1200" height="1200">Your browser does not support canvas attribute.</canvas>

上下文

首先要獲取canvas的上下文對象。

var context=drawing.getContext('2d');

填充和描邊

2d上下文的兩種基本操做：

1. 填充，對應屬性：fillStyle

2. 描邊，對應屬性：strokeStyle

繪製矩形

1> 繪製矩形

與矩形相關的操做方法有：fillRect，strokeRect，clearRect。三個方法參數：4個。x，y，矩形寬度，矩形高度

繪製路徑

2> 畫布上繪製路徑，必須先用beginPath()，最後context.stroke();對路徑進行描邊

繪製文本

3> 繪製文本。主要有兩個方法：fillText(),strokeText()。

有4個參數：要繪製的文本參數；x座標；y座標；最大像素寬度（可選）

3個屬性：

--》1. font，文本樣式，大小，字體

--》2. textAlign，文本對齊方式。start，end（推薦）；left，right；center

--》3. textBaseline可能的值： top，hanging，middle，alphabetic，ideographic和bottom

變換

從新定位原點

context.translate(200,200);//將（200，200）設置爲座標原點

旋轉元素

context.rotate(1);

跟蹤上下文狀態變化

調用save()方法將全部設置保存入棧，而後對上下文進行其餘修改，須要以前保存的狀態時，調用restore()方法，將保存的棧結構位置向前返回一級，回覆以前的狀態。

繪製圖像