1、canvas和其他標簽一樣使用，但是IE8以下是不支持的，可以在canvas裏面加一個span用來提示，例如：

<canvas>
    <span>IE8不支持canvas</span>
</canvas> 

另外畫布的大小，需要直接在內聯樣式裏面設置，而不要在外部樣式表裏面設置，在外部樣式表裏設置寬高後，canvas裏面的元素也會同比縮放，例如：

<canvas id="c1" width="400" height="400">
    <span>IE8不支持canvas</span>
</canvas>

2.畫方形

oC.fillRect(x,y,w,h); 4個參數依次為x坐標，y坐標，寬，高。同理邊框矩形也是oC.strokeRect(x,y,w,h);

繪圖之前可以設置繪圖樣式：

oGC.fillStyle = ‘red‘;
oGC.strokeStyle = ‘blue‘;
oGC.lineWidth = 10;
oGC.lineJoin = ‘bevel‘;//控制線的邊角 miter(默認) round(圓角) bevel(斜角)

3、繪制路徑

設置路徑的相關方法beginPath() closePath() moveTo() lineTo()

設置好路徑後，通過oGc.storke()或者oGc.fill()來繪制

同理也可以在繪制前設置樣式，直線還有一個特殊的樣式，端點樣式oGc.lineCap = ‘round‘ 用的不多

還有兩個方法，用來將設置樣式值針對某一塊代碼的oGc.save() oGc.restore().

示例代碼：

oGC.save();
    
    oGC.fillStyle = ‘red‘;
    
    oGC.beginPath();
    
    oGC.moveTo(100,100);
    
    oGC.lineTo(200,200);
    
    oGC.lineTo(300,200);
    
    oGC.closePath();
    
    oGC.fill();
    
    oGC.restore();
    
    
    oGC.beginPath();
    
    oGC.moveTo(
 
100,200);
    
    oGC.lineTo(200,300);
    
    oGC.lineTo(300,300);
    
    oGC.closePath();
    
    oGC.fill();

4、繪制弧形路徑

相關方法：oGC.arc(200,200,150,0,90*Math.PI/180,true);參數一次是圓心坐標，半徑，起始弧度，結束弧度，是否逆時針方向。

幾個繪制其他弧形的方法：

oGC.arcTo(100,100,200,100,100); oGC.quadraticCurveTo(100,100,200,100); oGC.bezierCurveTo(100,100,200,200,200,100); 和貝塞爾曲線相關，用的不多。

5.變換

變換也是有三種translate，scale，rotate

6.插入圖片

drawImage(obj,x,y,w,h); 五個參數依次是圖片對象，x,y坐標，寬高。由於圖片得提前加載好，所以可以利用圖片預加載，當圖片加載好了之後，在執行往canvas裏面插入圖片。

7.設置背景

createPattern(obj,‘repeat‘); 兩個參數依次是圖片對象和平鋪方式。用法如下：

var bg = oGC.createPattern(obj,‘repeat‘);
oGC.fillStyle = bg;
oGC.fillRect(0,0,300,300);

8.漸變

線性漸變：createLinearGradient(x1,y1,x2,y2); 4個參數依次是起始點的坐標，結束點的坐標。用法如下：

var obj = oGC.createLinearGradient(150,100,250,200);
obj.addColorStop(0,‘red‘);
obj.addColorStop(0.5,‘yellow‘);
obj.addColorStop(1,‘blue‘);
oGC.fillStyle = obj;
oGC.fillRect(150,100,100,100);

放射性漸變：createRadialGradient(x1,y1,r1,x2,y2,r2); 參數依次是第一個圓的坐標和半徑，第二個圓的坐標和半徑。用法如下：

var obj = oGC.createRadialGradient(200,200,100,200,200,150);
obj.addColorStop(0,‘red‘);
obj.addColorStop(0.5,‘yellow‘);
obj.addColorStop(1,‘blue‘);
oGC.fillStyle = obj;
oGC.fillRect(0,0,oC.width,oC.height);

9.添加文字

fillText(‘你好‘,x,y); 參數依次是需要添加的文字，以及坐標 strokeText用法一樣。

在添加文字之前，需要設置一些文字的樣式。例如：

oGc.font = ‘60px impact‘; oGc.textBaseline = ‘top‘(上下對齊方式)

還可以通過oGc.measureText(str).width;來獲取寬度，高度和文字大小相等。綜合用法如下：

oGC.font = ‘60px impact‘;
    
oGC.textBaseline = ‘top‘;  //middle bottom
    
var w = oGC.measureText(‘hello word‘).width;
    
oGC.fillText(‘hello word‘,(oC.width - w)/2,(oC.height - 60)/2);

10.添加陰影

oGc.shadowOffsetX = 10;//偏移量

oGc.shadowColor = ‘red‘; //陰影顏色

oGc.shadowBlue = 3 //模糊值

canvas標簽的基本用法