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

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

var canvas = document.getElementById( canvas var ctx = canvas.getContext( 2d 

Canvas是基于狀態繪制圖像的。

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

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

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

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

3.路徑樣式

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

4.繪制弧線

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

5.繪制矩形

context.rect(x, y, width, height); //設置矩形狀態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
用于設置線條兩端的形狀，有以下三種值：

butt(default) //默認缺省round //圓頭square //方頭context.lineCap = round 

8.線條與線條相交的形態：lineJoin
三種屬性值：

miter(default) //尖角bevel //斜接round //圓角context.lineJoin = round //當尖角很尖銳時，會出現lineJoin為bevel//此時跟另外一個屬性有關：miterLimit，默認值是10//當在lineJoin為miter情況下，miterLimit大于10時，lineJoin會自動變成bevel

9.圖像變換和狀態保存
圖像變換：

位移：translate(x,y);旋轉：rotate(deg);縮放：scale(sx,sy);//保存當前圖形狀態:context.save();//恢復圖形的所有狀態：context.restore();//使用：context.save();context.translate(x,y);context.restore();

10.變換矩陣

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

11.線性漸變

var grd = context.createLinearGradient(xstart,ystart,xend,yend);//開始坐標到結束坐標grd.addColorStop(stop,color);//stop為浮點數，開始坐標點到結束坐標點直線上，某個位置（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);//開始圓心坐標到結束圓心坐標，以及半徑grd.addColorStop(stop,color);//stop為浮點數，開始坐標點到結束坐標點直線上，某個位置（0.0~1.0之間）

13.圖片填充

createPattern(img,repeat-style) //img為圖片對象，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對象，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.fill >
 
15.video填充

createPattern(video,repeat-style) //video視頻對象
 
16.另一種弧線繪制方法

context.arcTo( x1,y1,x2,y2, //x1,y1,x2,y2兩個坐標與起始點x0,y0組成一個角 radius //半徑)
例：

context.moveTo(x0,y0);context.arcTo(x1,y1,x2,y2,R);//起始點為(x0,y0)，該弧線與01線以及12線相切
 
17.貝塞爾曲線
貝塞爾二次曲線
context.moveTo(x0, y0); //起始點context.quadraticCurveTo( x1, y1, //控制點坐標 x2, y2 //終點坐標)
貝塞爾三次曲線
context.moveTo(x0, y0); //起始點context.bezierCurveTo( x1, y1, //控制點坐標 x2, y2, //控制點坐標 x3, y3 //終點坐標)
18.文字渲染
context.font = font-style font-variant font-weight font-size font-family //css字體樣式，默認值： 20px sans-serif context.fillText(String, x, y, [maxlen]); //String字符串，和坐標位置，第四個為可選參數，這行文字的最長寬度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: 設置多種字體備選，支持@font-face
文本水平對齊：

context.textAlign = left right center
文本垂直對齊：

context.textBaseline = top middle bottom alphabetic (Default) ideographic hanging
文本的度量：

context.measureText(String).width //獲取渲染的字符串的寬度
19.陰影
context.shadowColor //陰影顏色context.shadowOffsetX //陰影的位移值context.shadowOffsetYcontext.shadowBlur //陰影模糊度
20.全局方法：
context.globalAlpha = 1 (Default) //全局透明度，默認不透明context.globalCompositeOperation = source-over (Default) //繪制的圖像在重疊的時候的效果，默認是(source-over)后面繪制的圖像覆蓋前面繪制的圖像 source-atop //后面繪制的圖像覆蓋前面繪制的圖像，但后面的圖像只顯示重疊部分 source-in //后面繪制的圖像覆蓋前面繪制的圖像，但只顯示重疊部分 source-out //只顯示后繪制的圖像，而且重疊部分被切掉 destination-over //前面繪制的圖像覆蓋后面繪制的圖像 destination-atop //前面繪制的圖像覆蓋后面繪制的圖像，但前繪制的圖像只顯示重疊部分 destination-in //前面繪制的圖像覆蓋后面繪制的圖像，但只顯示重疊部分 destination-out //只顯示前繪制的圖像，而且重疊部分被切掉 lighter //重疊部分顏色疊加融合 copy //只顯示后繪制圖像 xor //異或，重疊部分被挖空
21.剪輯區域
將當前創建的路徑設置為當前剪切路徑的方法
void ctx.clip();void ctx.clip(fillRule);void ctx.clip(path, fillRule);
fillRule
這個算法判斷一個點是在路徑內還是在路徑外。
path
需要剪切的 Path2D 路徑。
例：
ctx.arc(100, 100, 75, 0, Math.PI*2, false);ctx.clip();ctx.fillRect(0, 0, 100,100);
22.非零環繞原則
 路徑方向
 應用：鏤空剪紙效果 
23.canvas交互
context.clearRect(x,y,width,height) //清空指定的區域context.isPointInPath(x,y) //點擊檢測函數，該點是否在當前規劃路徑內，當檢測點包含在當前或指定的路徑內，返回 true；否則返回 false//以下兩個是獲取鼠標點擊在canvas坐標var x = event.clientX - canvas.getBoundingClientRect().left;var y = event.clientY - canvas.getBoundingClientRect().top;
24.擴展Canvas的context
將drawStar方法擴展到context：
CanvasRenderingContext2D.prototype.drawStar = function(){}
25.Canvas兼容性
檢測
 canvas id= canvas 當前瀏覽器不支持Canvas，請更換瀏覽器再試 /canvas 
Canvas與IE6、7、8瀏覽器的兼容性問題
引入explorecanvas庫：
http://code.google.com/p/explorecanvas/ !--[if IE] script type= text/javascript src= ../excanvas.js /script ![endif]-- 
26.canvas圖形庫：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
以上就是HTML5 Canvas 繪圖實例教程的詳細內容，其它編程語言        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。