Canvas基礎入門手冊一
1.<canvas id="mycanvas" width="800" height="600"></canvas> 2.獲取canvas物件;var canvas=document.getElementById('mycanvas'); 3.渲染上下文;var ctx=canvas.getContext('2d'); 4.顏色、樣式和陰影 fillStyle:設定填充繪畫的顏色、漸變或模式(區域填充) strokeStyle:設定筆觸的顏色、漸變或模式(描邊) shadowColor:設定陰影的顏色 shadowBlur:陰影的模糊級別; shadowOffsetX、shadowOffsetY:返回陰影距形狀的水平、垂直距離
5.繪製矩形: fillRect(x,y,w,h);//繪製一個填充的矩形,使用之前要先使用fillStyle才能起到效果 strokeRect(x, y, width, height);//繪製一個矩形的邊框,使用之前要先使用strokeStyle才能起到效果 clearRect(x, y, width, height);//清除指定矩形區域,讓清除部分完全透明。 例: ctx.fillStyle = "red"; ctx.fillRect(20 , 20 , 40 , 40); ctx.strokeStyle = "blue"; ctx.strokeRect(40 , 40 , 60 , 60); ctx.clearRect(30 , 30 , 50 ,50);
6. 繪製路徑: 首先,你需要建立路徑起始點。 beginPath(); 然後你使用畫圖命令去畫出路徑。 之後你把路徑封閉。closePath(); 一旦路徑生成,你就能通過描邊或填充路徑區域來渲染圖形。stroke()或fill(),stroke用於描邊,必須在使用之前用closePath()才能關閉路徑;fill用於填充, moveTo(x,y);設定路徑的起始位置,每次設定新路徑的時候必須使用moveTo,在beginPath()後使用
例: ctx.strokeStyle="red" ctx.fillStyle="yellow"; ctx.beginPath(); ctx.moveTo(120,120);//起點 ctx.lineTo(120,50); ctx.lineTo(150,50); ctx.fill(); ctx.closePath() ctx.stroke();
7.繪製直線lineTo(x, y);初始配合moveTo()使用
8.圓弧 arc(x, y, radius, startAngle, endAngle, anticlockwise);//radius半徑 startAngle開始, endAngle結束, anticlockwise方向:true->你是針,false->順時針
例: ctx.moveTo(260,120); ctx.arc(220,120,40,0,Math.PI*2,false); ctx.moveTo(205,105); ctx.arc(200,105,5,0,Math.PI*2,false); ctx.moveTo(245,105); ctx.arc(240,105,5,0,Math.PI*2,false); ctx.moveTo(220,117); ctx.arc(220,125,3, Math.PI*3/2 , Math.PI*1/2 ,true); ctx.moveTo(220+Math.sin(Math.PI/4)*20,125+Math.sin(Math.PI/4)*20); ctx.arc(220,125,20, Math.PI/4 , Math.PI*3/4 ,false); ctx.stroke();
arcTo(x1, y1, x2, y2, radius) //繪製圓弧,根據初始點和兩個控制點進行繪製 例: ctx.strokeStyle='brown'; ctx.moveTo(100,250); ctx.arcTo(250, 250, 270, 350, 100); ctx.stroke();
9.貝塞爾曲線 二次貝塞爾曲線quadraticCurveTo(cp1x, cp1y, x, y);cp1x,cp1y為一個控制點,x,y為結束點。初始點是moveTo(x,y)設定; 例: ctx.moveTo(300,50); ctx.quadraticCurveTo(300, 100, 350, 100); ctx.quadraticCurveTo(400, 100, 400, 50); ctx.quadraticCurveTo(400, 0, 350, 0); ctx.quadraticCurveTo(300, 0, 300, 50); ctx.stroke(); 三次貝塞爾曲線bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); 例:ctx.moveTo(450,150); ctx.bezierCurveTo(500, 300, 600, 0, 650, 150) ctx.stroke(); 10.線型
lineWidth=value 設定線條寬度。value是數值代表多少個畫素 lineCap=type 設定線條末端樣式。type : butt,round 和 square;預設是 butt。 lineJoin = type 設定線條與線條間接合處的樣式。type : round, bevel 和 miter。預設是 miter。 miterLimit=value 限制當兩條線相交時交接處最大長度;所謂交接處長度(斜接長度)是指線條交接處內角頂點到外角頂點的長度。 getLineDash() 返回一個包含當前虛線樣式,長度為非負偶數的陣列。 setLineDash(segments) 設定當前虛線樣式。 lineDashOffset = value 設定虛線樣式的起始偏移量。 例: ctx.beginPath(); ctx.lineCap="butt"; ctx.lineWidth=10; ctx.moveTo(85,50); ctx.lineTo(85,260); ctx.stroke(); 11.漸變
createLinearGradient(x1, y1, x2, y2) 表示漸變的起點 (x1,y1) 與終點 (x2,y2)。 createRadialGradient(x1, y1, r1, x2, y2, r2) 前三個定義一個以 (x1,y1) 為原點,半徑為 r1 的圓,後三個引數則定義另一個以 (x2,y2) 為原點,半徑為 r2 的圓。 gradient.addColorStop(position, color) addColorStop 方法接受 2 個引數,position 引數必須是一個 0.0 與 1.0 之間的數值,表示漸變中顏色所在的相對位置。例如,0.5 表示顏色會出現在正中間。color 引數必須是一個有效的 CSS 顏色值(如 #FFF, rgba(0,0,0,1),等等)。 例: var lingrad = ctx.createLinearGradient(0,0,0,150); lingrad.addColorStop(0, '#00ABEB'); lingrad.addColorStop(0.5, '#fff'); var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90); radgrad4.addColorStop(0, '#F4F201'); radgrad4.addColorStop(0.8, 'red'); radgrad4.addColorStop(1, 'rgba(228,199,0,0)'); ctx.fillStyle = radgrad4; ctx.fillRect(0,0,150,150);
12.圖案樣式
createPattern(image, type) Image 可以是一個 Image 物件的引用,或者另一個 canvas 物件。Type 必須是下面的字串值之一:repeat,repeat-x,repeat-y 和 no-repeat。 與 drawImage 有點不同,你需要確認 image 物件已經裝載完畢,否則圖案可能效果不對的。 例: var img = new Image(); img.src = "image/baozha.png" img.onload=function(){ console.log(100) var ptrn = ctx.createPattern(img,'repeat') ctx.fillStyle = ptrn; ctx.fillRect(200,200,450,450); } 13.陰影
shadowOffsetX = float 、 shadowOffsetY = float shadowOffsetX 和 shadowOffsetY 用來設定陰影在 X 和 Y 軸的延伸距離,它們是不受變換矩陣所影響的。負值表示陰影會往上或左延伸,正值則表示會往下或右延伸,它們預設都為 0。 shadowBlur = float 設定陰影的模糊程度 shadowColor = color 設定陰影顏色 例: ctx.shadowOffsetX =0; ctx.shadowColor="#ccc"; ctx.shadowBlur = 10; ctx.fillStyle = "burlywood"; ctx.fillRect(50,50, 100,100); 14.Canvas填充規則 fill()
15.繪製文字
fillText(text, x, y textMaxWidth) 填充文字 strokeText(text, x, y textMaxWidth) 繪製文字 //text:文字內容 x,y:起始座標 textMaxWidth:文字區域的最大長度(可不填) 例: ctx.font = "48px serif"; ctx.fillText("浩然正氣",300,300,150)
16. 文字樣式
font = value 設定文字的字型大小和字型 font-size font-family (大小在前,字型在後) textAlign = value 文字對齊選項. 可選的值包括:start, end, left, right or center. 預設值是 start。
textBaseline = value 基線對齊選項. 可選的值包括:top, hanging, middle, alphabetic, ideographic, bottom。預設值是 alphabetic。
direction = value 文字方向。可能的值包括:ltr, rtl, inherit。預設值是 inherit。 measureText(text) 將返回一個 TextMetrics物件的寬度、所在畫素,這些體現文字特性的屬性。