一、canvas標簽的說明
在設置cancas大小的時候，必須在標簽內寫，如果在css內寫會發生變化
默認寬度300px，默認高度 150px 背景顏色紅色 的一個長方形

<canvas width="" height="" id=""> 您的瀏覽器不支持canvas，請更換瀏覽器！</canvas>

二、成功使用canvas繪圖的前提
需要2d渲染環境

<canvas id="can" width="500" height="500">您的瀏覽器不支持canvas,請您更換瀏覽器！</canvas><script>var can = document.getElementById("can");var cxt = can.getContext("2d");//2d渲染環境

三、繪制畫圖的各種屬性方法
1、
繪制矩形屬性:
1、 fillRect(x,y,w,h) 填充實心矩形 x y w h
起點x軸位置 起點y軸位置 寬 高

var can = document.getElementById("can");var cxt = can.getContext("2d");//2d渲染環境cxt.fillRect(50,50,100,100);//填充方法繪制實心矩形

如：
2、 strokeRect(x,y,w,h) 繪制空心矩形 x y w h

起點x軸位置 起點y軸位置 寬 高var can = document.getElementById("can");var cxt = can.getContext("2d");//2d渲染環境cxt.strokeRect(50,50,100,100);//觸筆方法繪制空心矩形

3、 clearRect(x,y,w,h) 清除矩形選區，可以把2d環境內的在清除代碼前面的畫布內的內容
x y w h
清楚x起點 清楚起點 寬 高

var can = document.getElementById("can");var cxt = can.getContext("2d");//2d渲染環境cxt.strokeRect(50,50,100,100);//觸筆方法繪制空心矩形cxt.fillRect(50,50,100,100);//填充方法繪制實心矩形cxt.clearRect(0,0,can.width,can.height);//清楚畫布內容 從0.0 開始 清除500*500

四、
設置繪圖樣式：
fillStyle: 填充顏色
strokeStyle: 觸筆顏色
lineWidth: 觸筆寬度(線寬)
1、 fillStyle: 填充顏色
用于對 fillRect(x,y,w,h) 填充實心矩形 的內容顏色
2、strokeStyle: 觸筆顏色 用于對 strokeRect(x,y,w,h) 繪制空心矩形 或者線條的顏色
3、lineWidth: 觸筆寬度(線寬) 用于對 strokeRect(x,y,w,h) 繪制空心矩形 或者線條的大小
五、
繪圖路徑:
beginPath() :開始路徑
closePath():結束路徑
moveTo(x,y):將觸筆移動到x,y點
lineTo(x,y):繪制到x,y點
stroke(): 觸筆方法 畫線 默認為黑色
fill():填充方法
rect(x,y,w,h):矩形路徑
save():保存路徑
restore():恢復路徑
1、首先
moveTo(x,y):將觸筆移動到x,y點
lineTo(x,y):繪制到x,y點
stroke(): 觸筆方法 畫線 默認為黑色
的結合使用
如：繪制一個空心三角形，三條線條

cxt.moveTo(200,200);//繪制線條的起點cxt.lineTo(300,200);//繪制線條終點cxt.stroke(); 需要執行這個筆觸方法才能顯示出來線條cxt.moveTo(300,200);//下一條線條的起點cxt.lineTo(250,100);//下一條線條的終點cxt.stroke();cxt.moveTo(200,200);//下一條線條的起點cxt.lineTo(250,100);//下一條線條的終點cxt.stroke();

2、繪制一個實心三角形，需要開始路徑和結束路徑，也可以不需要寫每一段的開始路徑，只需要有一個開始路徑，然后寫兩個結束路徑就可以了
beginPath() :開始路徑
closePath():結束路徑

cxt.beginPath();//開始路勁cxt.moveTo(200,200);//繪制線條的起點cxt.lineTo(300,200);//繪制線條終點cxt.lineTo(250,100);//下一條線條的終點cxt.closePath();//結束路勁cxt.fill();//cxt.moveTo(200,200);//下一條線條的起點//cxt.lineTo(250,100);//下一條線條的終點//cxt.stroke();

3、
fill():填充方法
rect(x,y,w,h):矩形路勁
這兩個與上面的繪制矩形的是一樣的，只是分開了
4、
save():保存路勁
restore():恢復路勁
如下面繪制的圖形:
在沒有使用save 與 restore 之前的樣式是這樣的，下面兩個三角形是一樣的

使用后：其實save 與 restore 使用后就相當于把中間哪個三角形獨立起來，上面沒有使用使的中間的顏色設置影響下面的（下面的沒有設置顏色，所有會被影響到），現在把中間的獨立起來，那么第三個就會受第一個三角形的影響

//這里是一個三角形var can = document.getElementById("can");var cxt = can.getContext("2d");//2d渲染環境cxt.strokeStyle = "#03f"; //設置觸筆方法的顏色cxt.fillStyle = "#339933";cxt.lineWidth = 10;cxt.beginPath();//開始路勁cxt.moveTo(200,200);//繪制線條的起點cxt.lineTo(300,200);//繪制線條終點cxt.lineTo(250,100);//下一條線條的終點cxt.closePath();//結束路勁cxt.stroke();cxt.fill();//這里也是一個三角形//新開辟一個空間來繪制圖形cxt.save();//保存之前的畫布內容cxt.strokeStyle = "#990000";cxt.fillStyle = "#ff0099";cxt.beginPath();//開始路勁cxt.moveTo(200,300);cxt.lineTo(300,290);cxt.lineTo(350,200);cxt.closePath();//結束路勁cxt.stroke();cxt.fill();cxt.restore();//釋放之前的畫布內容//這里也是一個三角形//cxt.strokeStyle = "#03f"; //設置觸筆方法的顏色//cxt.fillStyle = "#339933";cxt.beginPath();//開始路勁cxt.moveTo(200,400);cxt.lineTo(300,390);cxt.lineTo(350,300);cxt.closePath();//結束路勁cxt.stroke();cxt.fill();

5、圖形邊界樣式：
lineJoin : 邊界連接點樣式
miter(默認值),round(圓角),bevel(斜角)
lineCap: 端點樣式
butt(默認值),round(圓角),square(高度多出線寬一半
1、lineJoin : 邊界連接點樣式
如：

var can = document.getElementById("can");var cxt = can.getContext("2d");//2d渲染環境cxt.lineWidth = 10;//cxt.lineJoin = "round"; //設置圓角cxt.lineJoin = "bevel"; 設置斜角cxt.rect(50,50,100,100);//設置矩形路徑：x,y,w,hcxt.stroke();//觸筆方法 繪制一個空心的矩形

2、lineCap: 端點樣式，線條端點的樣式 butt(默認值),round(圓角),square(高度多出線寬一半)

var can = document.getElementById("can");var cxt = can.getContext("2d");//2d渲染環境cxt.strokeStyle = "#03f"; //設置觸筆方法的顏色cxt.lineWidth = 20;cxt.lineCap = "round";cxt.moveTo(200,200);//繪制線條的起點cxt.lineTo(300,200);//繪制線條終點cxt.stroke();

3、繪制圓形
arc(x,y,r,半徑,順逆)
x , y 圓心坐標位置
r 圓半徑
0,360 從0度到360度 繪制一個圓形
true/false 順時針/逆時針繪圖

var can = document.getElementById("can");var cxt = can.getContext("2d");//2d渲染環境cxt.fillStyle = "#ffcc33";cxt.lineWidth = 10;cxt.arc(250,250,50,0,360,false);//設置圓形路勁:圓心坐標xy 圓半徑 0-360度 逆時針cxt.stroke();cxt.fill();

4、
繪制曲線
arcTo(x1,y1,x2,y2,r)
x1,y1 坐標一 x2,y2坐標二 r圓弧半斤
quadraticCurveTo(dx,dy,x1,y1)
貝塞爾曲線:dx,dy控制點 x1,y1結束坐標
bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1)
貝塞爾曲線:dx1,dy1 控制點一 dx2,dy2控制點二
x1,y1結束坐標
第一種： arcTo(x1,y1,x2,y2,r)
x1,y1 坐標一 x2,y2坐標二 r圓弧半斤

var can = document.getElementById("can");var cxt = can.getContext("2d");//2d渲染環境//cxt.fillStyle = "#ffcc33";cxt.lineWidth = 10;cxt.moveTo(100,200);cxt.arcTo(100,100,200,100,50); cxt.stroke();//cxt.fill();如圖所示：從100.200開始向上到100，100 然后到200.100 弧度為這三給 點構成的三角形內的弧度，半徑為50

第二種
quadraticCurveTo(dx,dy,x1,y1)
貝塞爾曲線:dx,dy控制點 x1,y1結束坐標

var can = document.getElementById("can");var cxt = can.getContext("2d");//2d渲染環境//cxt.fillStyle = "#ffcc33";cxt.lineWidth = 10;cxt.moveTo(100,200);cxt.quadraticCurveTo(50,50,300,100) cxt.stroke();如圖，三個點構成的三角形內的弧

第三種
貝塞爾曲線:dx1,dy1 控制點一 dx2,dy2控制點二
x1,y1結束坐標

var can = document.getElementById("can");var cxt = can.getContext("2d");//2d渲染環境//cxt.fillStyle = "#ffcc33";cxt.lineWidth = 10;cxt.moveTo(100,200);//起點位置cxt.bezierCurveTo(100,100,300,300,300,100)cxt.stroke();如圖：從起點到第一個控制點到第二個到結束點

總結

以上是生活随笔為你收集整理的h5学习笔记之canvas绘图（1）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。