canvas繪圖基礎第一步

1.canvas繪圖首先在html的body中新增如下標籤

<canvas id="canvas"></canvas>

2.在script標籤中編寫相關js程式碼：

首先獲取canvas的dom物件，然後獲取上下文物件context，之後就可以通過context物件繪圖啦。( 獲取context物件時，需要傳入引數 "2d")

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

可以通過canvas.width

和canvas.height來為你的canvas設定寬和高。

canvas繪圖基礎第二步

d raw one line

//設定狀態
context.moveTo(x1,y1);//放置筆尖的起始位置
context.lineTo(x2,y2);//連線兩點
context.lineWidth=10;//設定線條的寬度
context.strokeStyle="#058";//設定線條的樣式
//繪製，即描邊
context.stroke();

draw more lines

context.beginPath()
//繪製...
context.closePath() //可選(會將起始點和結束點連線起來)
 

draw //填充 （先填充，再描邊）

context.fillStyle="yellow"//也可以填充其他內容:color/gradient/image/canvas/video
context.fill();

draw a rectangle

//通過線條繪製矩形
cxt.moveTo(x,y)
cxt.lineTo(x+width,y)
cxt.lineTo(x+width,y+height);
cxt.lineTo(x,y+height)

//三個繪製矩形的函式如下

cxt.rect(x,y,width,height)
cxt.fillRect(x,y,width,height)
cxt.strokeRect(x,y,width,height)
 

線條的其他屬性： lineCap:用於線條兩端(開始處和結尾處)的形狀 取值：butt(default)/round(圓形頭)/square(方形頭) lineJoin:指定線條相交的時候的形態 取值：miter(default尖角)/bevel(斜接)/round(圓角)
miterLimit=10(預設)

影象變換：translate(x,y),rotate(deg),scale(sx,sy)
canvas狀態的儲存和恢復： save()/restore()

線性漸變：

var grd=context.createLinearGradient(xstart,ystart,xend,yend);
grd.addColorStop(stop,color);
context.fillStyle=grd;

徑向漸變：

var grd=context.createRadialGradient(x0,y0,r0,x1,y1,r1);
grd.addColorStop(stop,color);

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

draw an arc context.arc(centerx,centery,radius,startingAngle,endingAngle,anticlockwise=false(可選，預設順時針)) 角的度數如下： π = Math.PI

貝塞爾曲線Bezier

QuadraticCurveTo（貝塞爾二次曲線）
context.moveTo(x0,y0);
context.quadraticCurveTo(x1,y1,x2,y2);
BezierCurveTo（貝塞爾三次曲線）
context.moveTo(x0,y0);
context.bezierCurveTo(x1,y1,x2,y2,x3,y3);

設定陰影

context.shadowColor
context.shadowOffsetX
context.shadowOffsetY
context.shadowBlur//陰影模糊程度

drawImage

context.drawImage(image,dx,dy);
context.drawImage(image,dx,dy,dw,dh);
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);

//獲取滑鼠針對當前canvas的座標

var x=event.clientX-canvas.getBoundingClientRect().left;
var y=event.clientY-canvas.getBoundingClientRect().top;