1.基本使用

• HTML

<!--canvas標簽里的內容，只有瀏覽器不支持時才會顯示-->
<canvas id="canvas" width="1024" height="768" style="border: 1px solid #a6a6a6; margin: 0 auto; display: block;">當前瀏覽器不支持canvas</canvas>當前瀏覽器不支持Canvas，請更換瀏覽器后再試</canvas>

• JavaScript

var canvas = document.getElementById('canvas');
//得到上下文，繪制時真正用到的接口
var context = canvas.getContext('2d');

//也可以在js中設置大小，效果跟標簽設置一樣
canvas.width = 1024;
canvas.height = 768;

//也可以用js代碼判斷用戶瀏覽器是否支持Canvas
if (canvas.getContext){
    //若使用js判斷，就把context的獲得寫在這里
    var context = canvas.getContext('2d');
} else {
    alert("當前瀏覽器不支持Canvas，請更換瀏覽器后再試");
}

一個有邊框的畫布

2.畫一條直線

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

//(Canvas的左上角為0，0坐標)
//把畫筆放在(x，y)為(100，100)的坐標上
context.moveTo(100,100);
//讓畫筆從(100，100)移動到(700，700);
context.lineTo(700,700);
//設置線條寬度(默認是1，不帶單位)
context.lineWidth = 1;
//設置線條樣式(主要指顏色)
context.strokeStyle = "#005588";
//執行繪制(上面的代碼只是設置狀態,并未真正執行)
context.stroke();

畫布中出現一條直線

3.畫多邊形

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

//1.將畫筆放到(100,100)上
context.moveTo(100,100);
//2.再移動到(400,100)
context.lineTo(400,100);
//3.再移動到(400,400)
context.lineTo(400,400);
//4.再移動到(100,400)
context.lineTo(100,400);
//5.1再移動到起始點(100,100),實現一個多邊形
//    context.lineTo(100,100);
//5.2也可以直接使用closePath做圖型閉合處理
context.closePath();
//設置畫筆線條寬度(在多邊形中可以理解為邊框)
context.lineWidth = 5;
//設置畫筆線條顏色
context.strokeStyle = "red";
//設置多邊形填充顏色
context.fillStyle = "yellow";
//設置完多邊形填充顏色，必須執行fill方法才生效
context.fill();
//執行繪制，實現繪制一個正方形
context.stroke();

畫布中出現多邊形

4.分開畫兩條直線

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');


context.moveTo(100,100);
context.lineTo(700,200);
context.lineWidth = 5;
//此直線為紅色
context.strokeStyle = "red";
context.stroke();

//另一條線的開始(清空之前的狀態)
context.beginPath();
context.moveTo(300,300);
context.lineTo(600,500);
context.lineWidth = 10;
//此直線為藍色
context.strokeStyle = "blue";
context.stroke();

代碼效果圖

** 4.1假如不使用beginPath清空之前的狀態，就相當于： **

1. 執行第一個context.stroke()時。畫了一條從(100, 100)到(700, 200)的線條,樣式為{width=5, strokeStyle=red}。
2. 執行第二個context.stroke()時。畫了一條從(100, 100)到(700, 200)的線條；又畫了一條從(300,300)到(600,500)的線條;兩條線都為{width=7, strokeStyle=blue}。

5.畫一條弧線（圓）

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 800;
//(300,300)為圓心，100為半徑，0為起始位置，1.5*π為終點位置，布爾值：false(默認)表示順時針描繪、true表示逆時針描繪
context.arc(300, 300, 100, 0, 1.5 * Math.PI, false);
context.lineWidth = 5;
context.stroke();

位置參考圖

(false)順時針的效果

(true)逆時針的效果

使用注意

1. 不建議使用CSS的方式為canvas指定大小，因為CSS僅僅是設置canvas這塊畫布顯示的大小；而除此之外，canvas還包括其內里顯示圖畫分辨率的大小。

2. 在標簽內設置width和height，并且不帶px單位，這樣可以同時設置里外的寬高，這么做也是符合W3C標準的。

3. 默認 width：300；height：150；

彩蛋：繪制一個七巧板

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 800;
//七巧板數據
var tangram = [
    {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#caff67"},
    {p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#67becf"},
    {p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"#ef3d61"},
    {p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#f9f51a"},
    {p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#a594c0"},
    {p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#fa8ecc"},
    {p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#f6ca29"}
];
//遍歷數據，tangram數組的每個元素代表一個多邊形的數據
for (var i = 0; i < tangram.length; i++) {
    var polygonData = tangram[i];
    //根據信息，描繪圖形
    draw(polygonData);

}
function draw(data) {
    //每次進來先把之前的狀態清空
    context.beginPath();
    context.moveTo(data.p[0].x,data.p[0].y);
    var point = null;
    for (var i = 1; i < data.p.length; i++) {
        point = data.p[i];
        context.lineTo(point.x,point.y);
    }
    //做圖形閉合處理
    context.closePath();
    //設置每塊圖形的顏色
    context.fillStyle = data.color;
    //執行顏色的填充
    context.fill();
    //執行繪制(這一步可不用,因為填充完顏色后，即使沒有線條邊框依然能顯示一個七巧板)
    //context.stroke();
}

七巧板