canvas

HTML

<canvas id='canvas' width="500" height="300"></canvas>

//指定寬高使用屬性width和height來指定，不要用css,
css指定的是標簽顯示的大小而不是畫布的大小

javascript

var canvas = document.getElementById('canvas');
//繪圖的上下文環境
var context = canvas.getContext('2d');

//使用context來進行繪制

畫一條直線

//狀態設置
context.moveTo(100,100); //想象一支畫筆放在(100,100)這個點上
context.lineTo(700, 700); //然后移動到(700, 700)



//繪制
context.stroke() 

canvas中的繪圖是一種基于狀態的繪圖
一些其他的狀態:

• context.lineWidth //線條寬度
• context.strokeStyle //設置圖形輪廓的顏色

context.lineWidth = 5;
context.strokeStyle = "#005588"; 

畫一個三角型

context.moveTo(100, 100);
context.lineTo(700, 700);
context.lineTo(100,700);
context.lineTo(100,100);

context.stroke();

繪制狀態

• context.fillStyle //圖形填充顏色

繪制方法

• context.fill() //填充圖形

繪制兩個圖形

context.moveTo(100, 100);
context.lineTo(700, 700);
context.lineTo(100,700);
context.lineTo(100,100);


context.lineWidth = 5;
context.strokeStyle = "red"; 
context.stroke();

context.moveTo(200, 100);
context.lineTo(800, 700);


context.strokeStyle = "blue";
context.stroke();

上面的代碼繪制了一個三角形會一條直線，但是他們的線條顏色都是blue
原因：canvas是基于狀態的，第一個context.stroke()繪制后, 第二個到context.stroke()的繪制狀態包含從代碼定義開始的所有狀態，覆蓋了第一個context.stroke()繪制的圖形

• context.beginPath()
  生成路徑的第一步叫做beginPath()。本質上，路徑是由很多子路徑構成，這些子路徑都是在一個列表中，所有的子路徑（線、弧形、等等）構成圖形。而每次這個方法調用之后，列表清空重置，然后我們就可以重新繪制新的圖形。

  簡單來說就是清空之前的狀態

• context.closePath()

  就是閉合路徑closePath(),不是必需的。這個方法會通過繪制一條從當前點到開始點的直線來閉合圖形。如果圖形是已經閉合了的，即當前點為開始點，該函數什么也不做。

畫圓

context.arc(x, y, radius, startAngle, endAngle, anticlockwise)

x
圓弧中心（圓心）的 x 軸坐標。
y
圓弧中心（圓心）的 y 軸坐標。
radius
圓弧的半徑。
startAngle
圓弧的起始點， x軸方向開始計算，單位以弧度表示。
endAngle
圓弧的終點， 單位以弧度表示。

anticlockwise 方向 默認為順時針

清除畫布

ctx.clearRect(x, y, width, height);

x
矩形起點的 x 軸坐標。
y
矩形起點的 y 軸坐標。
width
矩形的寬度。
height
矩形的高度。

倒計時

• animation

setInterval(function(){
    render() //繪制畫面
    update() //調整數據結構
})