1、canvas和其他標(biāo)簽一樣使用，但是IE8以下是不支持的，可以在canvas里面加一個(gè)span用來提示，例如：

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

另外畫布的大小，需要直接在內(nèi)聯(lián)樣式里面設(shè)置，而不要在外部樣式表里面設(shè)置，在外部樣式表里設(shè)置寬高后，canvas里面的元素也會同比縮放，例如：

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

2.畫方形

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

繪圖之前可以設(shè)置繪圖樣式：

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

3、繪制路徑

設(shè)置路徑的相關(guān)方法beginPath() ?closePath() ?moveTo() ?lineTo()

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

同理也可以在繪制前設(shè)置樣式，直線還有一個(gè)特殊的樣式，端點(diǎn)樣式oGc.lineCap = 'round' 用的不多

還有兩個(gè)方法，用來將設(shè)置樣式值針對某一塊代碼的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、繪制弧形路徑

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

幾個(gè)繪制其他弧形的方法：

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

5.變換

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

6.插入圖片

drawImage(obj,x,y,w,h); ?五個(gè)參數(shù)依次是圖片對象，x,y坐標(biāo)，寬高。由于圖片得提前加載好，所以可以利用圖片預(yù)加載，當(dāng)圖片加載好了之后，在執(zhí)行往canvas里面插入圖片。

7.設(shè)置背景

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

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

8.漸變

線性漸變：createLinearGradient(x1,y1,x2,y2); ?4個(gè)參數(shù)依次是起始點(diǎn)的坐標(biāo)，結(jié)束點(diǎn)的坐標(biāo)。用法如下：

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); 參數(shù)依次是第一個(gè)圓的坐標(biāo)和半徑，第二個(gè)圓的坐標(biāo)和半徑。用法如下：

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); 參數(shù)依次是需要添加的文字，以及坐標(biāo) ?strokeText用法一樣。

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

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

轉(zhuǎn)載于:https://www.cnblogs.com/toodeep/p/4797491.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。