怎么用HTML5的CanvasAPI繪制圖形

通過(guò)以下Javascript語(yǔ)句訪(fǎng)問(wèn)canvas元素：

JavaScript Code復(fù)制內(nèi)容到剪貼板

1. //DOM寫(xiě)法  

2. window.onload = function () {   

3.     var canvas = document.getElementById("mainCanvas");   

4.     var context = canvas.getContext("2d");   

5. };   

6. //jQuery寫(xiě)法  

7. $(document).ready(function () {   

8.     var canvas = $("#mainCanvas");   

9.     var context = canvas.get(0).getContext("2d");   

10. });   

11. //接下來(lái)就可以調(diào)用context的方法來(lái)調(diào)用繪圖API  

2. 基礎(chǔ)API
2.1 坐標(biāo)系統(tǒng)
Canvas 2D渲染上下文采用平面笛卡爾坐標(biāo)系統(tǒng)，左上角為原點(diǎn)(0,0)，坐標(biāo)系統(tǒng)的1個(gè)單位相當(dāng)于屏幕的1個(gè)像素。具體如下圖：

2.2 繪制基本圖形
2.2.1 矩形

JavaScript Code復(fù)制內(nèi)容到剪貼板

1. //繪制一個(gè)填充矩形  

2. context.fillRect(x, y, width, height)   

3. //繪制一個(gè)邊框矩形  

4. context.strokeRect(x, y, width, height)   

5. //清除一個(gè)矩形區(qū)域  

6. context.clearRect(x, y, width, height)  

2.2.2 線(xiàn)條
繪制線(xiàn)條與繪制圖形有一些區(qū)別，線(xiàn)條實(shí)際上稱(chēng)為路徑。要繪制一條簡(jiǎn)單的路徑，首先必須調(diào)用beginPath方法，接著調(diào)用moveTo設(shè)置路徑的起點(diǎn)坐標(biāo)，然后調(diào)用lineTo設(shè)置線(xiàn)段終點(diǎn)坐標(biāo)（可多次設(shè)置），再調(diào)用closePath完成路徑繪制。最后調(diào)用stroke繪制輪廓（或調(diào)用fill填充路徑）。以下為例子：

JavaScript Code復(fù)制內(nèi)容到剪貼板

1. //示例  

2. context.beginPath();    //開(kāi)始路徑  

3. context.moveTo(40, 40);    //移動(dòng)到點(diǎn)(40,40)  

4. context.lineTo(300, 40);    //畫(huà)線(xiàn)到點(diǎn)(300,30)  

5. context.lineTo(40, 300);    //畫(huà)線(xiàn)到點(diǎn)(40,300)  

6. context.closePath();    //結(jié)束路徑  

7. context.stroke();    //繪制輪廓  

8. //或者填充用context.fill();  

2.2.3 圓形
Canvas實(shí)際上并沒(méi)有專(zhuān)門(mén)繪制圓形的方法，可以通過(guò)畫(huà)圓弧來(lái)模擬圓形。由于圓弧是一種路徑，所以畫(huà)圓弧的API應(yīng)該包含在beginPath和closePath之間。
2.3 樣式
2.3.1 修改線(xiàn)條顏色

JavaScript Code復(fù)制內(nèi)容到剪貼板

1. var color;   

2. //指定RGB值  

3. color = "rgb(255, 0, 0)";   

4. //指定RGBA值（最后一個(gè)參數(shù)為alpha值，取值0.0~1.0）  

5. color = "rgba(255, 0, 0, 1)";   

6. //指定16進(jìn)制碼  

7. color = "#FF0000";   

8. //用單詞指定  

9. color = "red";   

10. //設(shè)置填充顏色  

11. context.fillStyle = color;   

12. //設(shè)置邊框顏色  

13. context.strokeStyle = color;  

2.3.2 修改線(xiàn)寬

JavaScript Code復(fù)制內(nèi)容到剪貼板

1. //指定線(xiàn)寬值  

2. var value= 3;   

3. //設(shè)置邊框顏色  

4. context.linewidth = value;  

2.4 繪制文本

JavaScript Code復(fù)制內(nèi)容到剪貼板

1. //指定字體樣式  

2. context.font = "italic 30px 黑體";   

3. //在點(diǎn)(40,40)處畫(huà)文字  

4. context.fillText("Hello world!", 40, 40);  

2.5 繪制圖像
在繪制圖像之前，需要先定義圖像并加載。

CSS Code復(fù)制內(nèi)容到剪貼板

1. var img = new Image();   

2. img.src = "myImage.png";   

3. img.onload = function () {   

4.     //圖像加載完畢執(zhí)行   

5. };  

以下是drawImage API解釋?zhuān)?/p>

JavaScript Code復(fù)制內(nèi)容到剪貼板

1. //在(x,y)出繪制圖像image  

2. context.drawImage(image, x, y)   

3. //在(x,y)出繪制width*height的圖像image  

4. context.drawImage(image, x, y, width, height)   

5. //在image的(sx,sy)處截取sWidth*sHeight的圖像，在(dx,dy)處繪制dWidth*dHeight的圖像  

6. context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)  

3. 高級(jí)功能
3.1 使Canvas填滿(mǎn)瀏覽器窗口
最簡(jiǎn)單的方式是將canvas元素的寬度和高度精確設(shè)置為瀏覽器窗口的寬度和高度，用CSS消去白色空隙。
CSS代碼：

CSS Code復(fù)制內(nèi)容到剪貼板

1. * {   

2.     margin: 0;   

3.     padding: 0;   

4. }   

5.   

6. html, body {   

7.     height: 100%;   

8.     width: 100%;   

9. }   

10.   

11. canvas {   

12.     display: block;   

13. }  

Javascript代碼：

JavaScript Code復(fù)制內(nèi)容到剪貼板

1. function resizeCanvas() {   

2.     //canvas由jQuery獲取  

3.     canvas.attr("width", $(window).get(0).innerWidth);   

4.     canvas.attr("height", $(window).get(0).innerHeight);   

5.     context.fillRect(0, 0, canvas.width(), canvas.height());   

6. }   

7. $(window).resize(resizeCanvas);   

8. resizeCanvas();  

3.2 繪圖狀態(tài)
在canvas中，繪圖狀圖指的是描述某一時(shí)刻2D渲染上下文外觀(guān)的整套屬性，包括：變換矩陣、裁剪區(qū)域、globalAlpha、globalCompositeOperation、strokeStyle、fillStyle、lineWidth、lineCap、lineJoin、miterLimit、shadowOffsetX、shadowOffsetY、shadowBlur、shadowColor、font、textAlign和textBaseline。
當(dāng)需要改變畫(huà)布全局狀態(tài)時(shí)，一般先將當(dāng)前狀態(tài)保存起來(lái)——調(diào)用save方法將狀態(tài)推入繪圖狀態(tài)棧），做完操作之后，再調(diào)用restore方法回復(fù)繪圖狀態(tài)。

JavaScript Code復(fù)制內(nèi)容到剪貼板

1. //示例  

2. context.save();   

3. context.globalAlpha = 0.5;   

4. context.fillRect(0, 0, 200, 100);   

5. context.restore();  

3.3 變形
3.3.1 平移
將2D渲染上下文的原點(diǎn)從一個(gè)位置移動(dòng)到另一個(gè)位置。注意，這里移動(dòng)的是坐標(biāo)原點(diǎn)即全局繪圖位置，API如下：

JavaScript Code復(fù)制內(nèi)容到剪貼板

1. //將坐標(biāo)原點(diǎn)移動(dòng)到(x,y)  

2. context.translate(x, y)  

3.3.2 縮放

JavaScript Code復(fù)制內(nèi)容到剪貼板

1. //將全局橫縱尺寸縮放至x,y倍（即在原有數(shù)值乘上倍乘因子）  

2. context.scale(x, y)  

3.3.3 旋轉(zhuǎn)

JavaScript Code復(fù)制內(nèi)容到剪貼板

1. //將畫(huà)布繞著原點(diǎn)旋轉(zhuǎn)radius弧度  

2. context.rotate(radius)  

“怎么用HTML5的Canvas API繪制圖形”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！