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 bottomvar 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 //模糊值

轉載于:https://www.cnblogs.com/toodeep/p/4797491.html

總結

以上是生活随笔為你收集整理的canvas基本用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。