本文詳細(xì)講解如何利用HTML5 Canvas 繪圖的詳細(xì)教程，供php中文網(wǎng)網(wǎng)友參考學(xué)習(xí)

首先要注意： <canvas> 元素不被一些老的瀏覽器所支持, 但被支持于Firefox 1.5+, Opera 9+, 新版本的Safari, Chrome, 以及Internet Explorer 9.

需要先獲得2D渲染上下文才能繪制<canvas>元素

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

Canvas是基于狀態(tài)繪制圖像的。

基本使用：
1.使用下面兩個(gè)方法就可以定義一個(gè)路徑

context.moveTo(x,y); //起點(diǎn)context.lineTo(x,y); //連線到終點(diǎn)

2.對(duì)于多個(gè)路徑，如果想要分開處理，需要在路徑定義的首尾加上下面兩個(gè)方法，把他們分隔開

context.beginPath();  context.closePath();

3.路徑樣式

context.lineWidth    //定義線條寬度context.strokeStyle    //定義線條顏色context.fillStyle    //填充顏色context.stroke();    //繪制線條context.fill();        //繪制填充的顏色塊

4.繪制弧線

context.arc(      centerx, centery, radius,    //圓心坐標(biāo)(x,y)以及半徑r      startingAngle, endingAngle,    //開始的弧度值，和結(jié)束的弧度值      anticlockwise = false        //可選參數(shù)，（false順時(shí)針繪制）還是（true逆時(shí)針繪制）)

5.繪制矩形

context.rect(x, y, width, height); //設(shè)置矩形狀態(tài)context.fill();  context.stroke();//或者context.fillRect(x, y, width, height); //繪制填充的矩形context.strokeRect(x, y, width, height); //繪制邊框的矩形

6.fillStyle、strokeStyle的屬性值的格式

#FFF  #333rgb(255,128,0)  rgba(100,100,100,0.8)  hsl(20,62%,28%)  hsla(40,83%,33%,0.6)  red

7.線條的帽子：lineCap
用于設(shè)置線條兩端的形狀，有以下三種值：

butt(default)    //默認(rèn)缺省round    //圓頭square    //方頭context.lineCap = "round";

8.線條與線條相交的形態(tài)：lineJoin
三種屬性值：

miter(default)    //尖角bevel    //斜接round    //圓角context.lineJoin = "round";//當(dāng)尖角很尖銳時(shí)，會(huì)出現(xiàn)lineJoin為bevel//此時(shí)跟另外一個(gè)屬性有關(guān)：miterLimit，默認(rèn)值是10//當(dāng)在lineJoin為miter情況下，miterLimit大于10時(shí)，lineJoin會(huì)自動(dòng)變成bevel

9.圖像變換和狀態(tài)保存
圖像變換：

位移：translate(x,y);  旋轉(zhuǎn)：rotate(deg);  縮放：scale(sx,sy);//保存當(dāng)前圖形狀態(tài):context.save();//恢復(fù)圖形的所有狀態(tài)：context.restore();//使用：context.save();  context.translate(x,y);  context.restore();

10.變換矩陣

a    c    e  b    d    f0    0    1a水平縮放(1)  b水平傾斜(0)  c垂直傾斜(0)  d垂直縮放(1)  e水平位移(0)  f垂直位移(0)  即：默認(rèn)時(shí)，該變換矩陣為單位陣//設(shè)置變換矩陣transform(a,b,c,d,e,f);//重置變換矩陣setTransform(a,b,c,d,e,f);

11.線性漸變

var grd = context.createLinearGradient(xstart,ystart,xend,yend);//開始坐標(biāo)到結(jié)束坐標(biāo)grd.addColorStop(stop,color);//stop為浮點(diǎn)數(shù)，開始坐標(biāo)點(diǎn)到結(jié)束坐標(biāo)點(diǎn)直線上，某個(gè)位置（0.0~1.0之間）//例：var skyStyle = context.createLinearGradient(0,0,800,800);  skyStyle.addColorStop(0.0, 'black');  skyStyle.addColorStop(1.0, 'blue');    context.fillStyle = skyStyle;

12.徑向漸變

var grd = context.createRadialGradient(x0,y0,r0,x1,y1,r1);//開始圓心坐標(biāo)到結(jié)束圓心坐標(biāo)，以及半徑grd.addColorStop(stop,color);//stop為浮點(diǎn)數(shù)，開始坐標(biāo)點(diǎn)到結(jié)束坐標(biāo)點(diǎn)直線上，某個(gè)位置（0.0~1.0之間）

13.圖片填充

createPattern(img,repeat-style) //img為圖片對(duì)象，repeat-style填充格式//其中repeat-style: no-repeat/repeat-x/repeat-y/repeat//例：var backgroundImage = new Image();  backgroundImage.src = "bg.jpg";  backgroundImage.onload = function(){var pattern = context.createPattern(backgroundImage,"repeat");  context.fillStyle = pattern;  context.fillRect(0,0,800,800);  }

14.canvas填充

createPattern(canvas,repeat-style) //canvas對(duì)象，repeat-style填充格式

例：

    window.onload=function(){        var canvas=document.getElementById("canvas");          canvas.width=800;          canvas.height=800;        var context=canvas.getContext("2d");        var backCanvas=createBackgroundCanvas();        var pattern=context.createPattern(backCanvas,"repeat");          context.fillStyle=pattern;          context.fillRect(0,0,800,800);     }    function createBackgroundCanvas(){        var backCanvas=document.createElement("canvas");          backCanvas.width=100;          backCanvas.height=100;        var backContext=backCanvas.getContext("2d");          backContext.beginPath();          backContext.moveTo(15,15);          backContext.lineTo(50,50);          backContext.lineWidth=10;          backContext.strokeStyle="green";          backContext.stroke();        return backCanvas;      }

15.video填充

createPattern(video,repeat-style) //video視頻對(duì)象

16.另一種弧線繪制方法

context.arcTo(      x1,y1,x2,y2,    //x1,y1,x2,y2兩個(gè)坐標(biāo)與起始點(diǎn)x0,y0組成一個(gè)角      radius    //半徑)

例：

context.moveTo(x0,y0);  context.arcTo(x1,y1,x2,y2,R);//起始點(diǎn)為(x0,y0)，該弧線與01線以及12線相切

17.貝塞爾曲線
貝塞爾二次曲線

context.moveTo(x0, y0);    //起始點(diǎn)context.quadraticCurveTo(      x1, y1,    //控制點(diǎn)坐標(biāo)      x2, y2    //終點(diǎn)坐標(biāo))

貝塞爾三次曲線

context.moveTo(x0, y0);    //起始點(diǎn)context.bezierCurveTo(      x1, y1, //控制點(diǎn)坐標(biāo)      x2, y2, //控制點(diǎn)坐標(biāo)      x3, y3  //終點(diǎn)坐標(biāo))

18.文字渲染

context.font = "font-style font-variant font-weight font-size font-family";    //css字體樣式，默認(rèn)值："20px sans-serif"context.fillText(String, x, y, [maxlen]);    //String字符串，和坐標(biāo)位置，第四個(gè)為可選參數(shù)，這行文字的最長(zhǎng)寬度context.strokeText(String, x, y, [maxlen]);        font-style: normal    (Default)              italics   (斜體字)              oblique   (傾斜字體)    font-variant: normal  (Default)                small-caps    (小寫英文字母變成小的大寫字母)    font-weight: normal   (Default)               lighter               bold               bolder             100,200,300,400(normal)             500,600,700(bold)             800,900font-size:  20px (Default)              2em            150%font-family: 設(shè)置多種字體備選，支持@font-face

文本水平對(duì)齊：

context.textAlign = left                      right                      center

文本垂直對(duì)齊：

context.textBaseline =  top                          middle                          bottom                          alphabetic (Default)                          ideographic                          hanging

文本的度量：

context.measureText(String).width //獲取渲染的字符串的寬度

19.陰影

context.shadowColor    //陰影顏色context.shadowOffsetX    //陰影的位移值context.shadowOffsetY  context.shadowBlur    //陰影模糊度

20.全局方法：

context.globalAlpha = 1 (Default)    //全局透明度，默認(rèn)不透明context.globalCompositeOperation = "source-over" (Default) //繪制的圖像在重疊的時(shí)候的效果，默認(rèn)是(source-over)后面繪制的圖像覆蓋前面繪制的圖像"source-atop"    //后面繪制的圖像覆蓋前面繪制的圖像，但后面的圖像只顯示重疊部分"source-in"    //后面繪制的圖像覆蓋前面繪制的圖像，但只顯示重疊部分"source-out"    //只顯示后繪制的圖像，而且重疊部分被切掉"destination-over"    //前面繪制的圖像覆蓋后面繪制的圖像"destination-atop"    //前面繪制的圖像覆蓋后面繪制的圖像，但前繪制的圖像只顯示重疊部分"destination-in"    //前面繪制的圖像覆蓋后面繪制的圖像，但只顯示重疊部分"destination-out"    //只顯示前繪制的圖像，而且重疊部分被切掉"lighter"    //重疊部分顏色疊加融合"copy"    //只顯示后繪制圖像"xor"    //異或，重疊部分被挖空

21.剪輯區(qū)域
將當(dāng)前創(chuàng)建的路徑設(shè)置為當(dāng)前剪切路徑的方法

void ctx.clip();void ctx.clip(fillRule);void ctx.clip(path, fillRule);

fillRule

這個(gè)算法判斷一個(gè)點(diǎn)是在路徑內(nèi)還是在路徑外。

path
需要剪切的 Path2D 路徑。

例：

ctx.arc(100, 100, 75, 0, Math.PI*2, false);  ctx.clip();  ctx.fillRect(0, 0, 100,100);

22.非零環(huán)繞原則
路徑方向
應(yīng)用：鏤空剪紙效果
23.canvas交互

context.clearRect(x,y,width,height) //清空指定的區(qū)域context.isPointInPath(x,y) //點(diǎn)擊檢測(cè)函數(shù)，該點(diǎn)是否在當(dāng)前規(guī)劃路徑內(nèi)，當(dāng)檢測(cè)點(diǎn)包含在當(dāng)前或指定的路徑內(nèi)，返回 true；否則返回 false//以下兩個(gè)是獲取鼠標(biāo)點(diǎn)擊在canvas坐標(biāo)var x = event.clientX - canvas.getBoundingClientRect().left;var y = event.clientY - canvas.getBoundingClientRect().top;

24.擴(kuò)展Canvas的context
將drawStar方法擴(kuò)展到context：

CanvasRenderingContext2D.prototype.drawStar = function(){}

25.Canvas兼容性
檢測(cè)

<canvas id="canvas">當(dāng)前瀏覽器不支持Canvas，請(qǐng)更換瀏覽器再試</canvas>

Canvas與IE6、7、8瀏覽器的兼容性問(wèn)題

引入explorecanvas庫(kù)：

https://code.google.com/p/explorecanvas/<!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->

26.canvas圖形庫(kù)：canvasplus || artisanJS || RGraph

code.google.com/p/canvasplus

artisanjs.com

roopons.com.au/wp-content/plugins/viral-optins/js/rgraph

27.Canvas 的 API 接口文檔：

developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D