【上篇】 -- 建議學習時間4小時 課程共（上中下）三篇
此筆記是我初次接觸canvas的時候的學習筆記，這次特意整理為博客供大家入門學習，幾乎涵蓋了canvas所有的基礎知識，並且有眾多練習案例，建議大家學習10~15個小時，里面的案例請挨個敲一遍，這樣才能轉化為自己的知識。
技術要求：有html/css/js基礎。
canvas標簽
<canvas>是一個圖形容器，讓我們在網頁中繪制圖形，很多人把它稱為畫布，使用canvas繪制圖形就相當於在畫布上畫畫一樣，我們可以繪制非常炫酷的頁面效果。
如下圖這種：
上面的效果當然要后期才有能力編寫了，現在我們先從簡單的入手
直接看代碼
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{margin: 0;padding: 0} canvas{border: 2px solid #a4e2f9;margin: 30px auto;display: block} </style> </head> <body> <canvas height="300" width="500" id="myCanvas"></canvas> </body> </html>
我們定義了一個canvas標簽（用法和普通標簽一樣），然后在style中設置了一點樣式。
注意：canvas的真實寬高一定要在canvas屬性中設置，不能在css中設置，因為canvas默認的寬高是 300*150，如果在css中設置樣式，相當於是把畫布進行拉伸縮放
呈現效果是這樣的：
對於不支持畫布的瀏覽器，我們可以在中間設置替代顯示內容
<canvas id="myCanvas" width="150" height="150"> 你的瀏覽器不支持畫布 </canvas>
在畫布中繪制方塊
代碼寫到html末尾的<script>標簽中
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "red"; //設置顏色 ctx.fillRect(50,50, 200, 200); //繪制方塊
代碼解釋：首先要獲取canvas的dom，並獲取它的2d上下文，然后才能繪制，繪制使用fillRect(x, y, width, height)繪制方塊填充，使用fillStyle設置填充的顏色
注：我們所有對畫布的操作，都需要先去獲取繪圖上下文才能操作，也就是 getContext("2d")
然后繪制方塊描邊，使用strokeRect(x, y, width, height)，使用strokeStyle設置描邊顏色
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); //ctx.fillStyle = "red"; //設置顏色 //ctx.fillRect(50,50, 200, 200); //繪制方塊 ctx.strokeStyle = "red"; ctx.strokeRect(50,50, 200, 200); //繪制邊框
如果要清除（擦除）某個區域，使用 clearRect(x, y, width, height)，
如下，我們繪制了方塊，並且清除了繪制的區域，這樣就什么都看不到了。
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "red"; //設置顏色 ctx.fillRect(50,50, 200, 200); //繪制方塊 ctx.clearRect(50,50, 200, 200); //清除范圍
注意：這里清除的是方塊，如果要清除方塊描邊的話，需要把范圍擴大（因為描邊默認是外描邊） ctx.clearRect(48,48, 204, 204); //清除范圍
繪制路徑
使用beginPath()表示開始繪畫，使用 moveTo（x,y）標記繪制起點，使用 lineTo()進行繪制 ，使用closePath()閉合路徑，繪制完成路徑之后在使用 stroke()來繪制輪廓
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); //繪制路徑 ctx.beginPath(); ctx.moveTo(100, 100); //通常會使用moveTo()函數設置起點。我們也能夠使用moveTo()繪制一些不連續的路徑。 ctx.lineTo(200,100); ctx.lineTo(200,200); ctx.moveTo(300, 100); ctx.lineTo(300, 200); ctx.lineTo(400, 200); ctx.closePath();// 閉合路徑，會自動閉合路徑開始和結束的兩個點 ctx.stroke(); //繪制輪廓
顯示結果如下：
如果要繪制填充，使用 fill()
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); //繪制路徑 ctx.beginPath(); ctx.moveTo(100, 100); //通常會使用moveTo()函數設置起點。我們也能夠使用moveTo()繪制一些不連續的路徑。 ctx.lineTo(200,100); ctx.lineTo(200,200); ctx.moveTo(300, 100); ctx.lineTo(300, 200); ctx.lineTo(400, 200); ctx.closePath();// 閉合路徑，會自動閉合路徑開始和結束的兩個點 ctx.fill(); //繪制塊 （會自動閉合路徑）
繪制填充會自動閉合路徑，可以不用使用 closePath()
繪制圓形
使用arc(),具體參數如下
arc(x, y, radius, startAngle, endAngle, anticlockwise)
該方法有六個參數：x,y為繪制圓弧所在圓上的圓心坐標。radius為半徑。startAngle以及endAngle參數用弧度定義了開始以及結束的弧度。這些都是以x軸為基准。參數anticlockwise 為一個布爾值。為true時，是逆時針方向，否則順時針方向。
繪制一個圓圈：
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.arc(100, 100, 50, 0, Math.PI*2, true);// 繪制圓圈軌跡 ctx.stroke();
練習：繪制笑臉
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); //繪制笑臉 ctx.beginPath(); ctx.arc(75, 75, 50, 0, Math.PI*2, true);// 繪制圓圈軌跡 ctx.moveTo(110, 75); ctx.arc(75, 75, 35, 0, Math.PI, false);// 繪制圓圈軌跡 ctx.moveTo(65, 65); ctx.arc(60, 65, 5, 0, Math.PI*2, true);// 繪制圓圈軌跡 ctx.moveTo(95, 65); ctx.arc(90, 65, 5, 0, Math.PI*2, true);// 繪制圓圈軌跡 ctx.stroke();
練習：繪制兩個三角形
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); //繪制兩個三角形 ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(150, 50); ctx.lineTo(50, 150); ctx.fill(); ctx.beginPath(); ctx.moveTo(170, 70); ctx.lineTo(170, 170); ctx.lineTo(70, 170); ctx.closePath(); ctx.stroke();
繪制曲線
使用 貝塞爾函數
quadraticCurveTo(cp1x, cp1y, x, y)
繪制貝塞爾曲線，cp1x,cp1y為控制點，x,y為結束點。
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
繪制二次貝塞爾曲線，cp1x,cp1y為控制點一，cp2x,cp2y為控制點二，x,y為結束點。
繪制上上圖曲線的代碼如下：
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.moveTo(100,100); ctx.quadraticCurveTo(150,50,200,100); ctx.quadraticCurveTo(250,150,300,100); ctx.quadraticCurveTo(350,50,400,100); ctx.stroke();
練習：繪制聊天氣泡
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); //繪制聊天小氣泡 ctx.beginPath(); ctx.moveTo(100,130); ctx.quadraticCurveTo(100,100,130,100); ctx.lineTo(270,100); ctx.quadraticCurveTo(300,100,300,130); ctx.lineTo(300,200); ctx.quadraticCurveTo(300,230,270,230); ctx.lineTo(175,230); ctx.quadraticCurveTo(140,280,100,280); ctx.quadraticCurveTo(130,280,150,230); ctx.lineTo(130,230); ctx.quadraticCurveTo(100,230,100,200); ctx.closePath(); ctx.stroke();
練習：繪制心形
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); //繪制心形 ctx.beginPath(); ctx.moveTo(100,130); ctx.bezierCurveTo(100,50,170,50,200,100); ctx.bezierCurveTo(230,50,300,50,300,130); ctx.bezierCurveTo(300,140,300,210,200,250); ctx.bezierCurveTo(100,200,100,140,100,130); ctx.stroke();
綜合練習：繪制吃豆子
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); //繪制吃豆子 roundedRect(ctx,12,12,195,174,15); roundedRect(ctx,19,19,180,160,9); roundedRect(ctx,53,53,49,33,10); roundedRect(ctx,53,119,49,16,6); roundedRect(ctx,135,53,49,33,10); roundedRect(ctx,135,119,25,49,10); ctx.beginPath(); ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false); ctx.lineTo(31,37); ctx.fill(); for(var i=0; i<8; i++){ ctx.fillRect(51+i*16,35,4,4); } for(var i=0; i<6; i++){ ctx.fillRect(115,51+i*16,4,4); } for(var i=0; i<8; i++){ ctx.fillRect(51+i*16,99,4,4); } ctx.beginPath(); ctx.moveTo(83,116); ctx.lineTo(83,102); ctx.bezierCurveTo(83,94,89,88,97,88); ctx.bezierCurveTo(105,88,111,94,111,102); ctx.lineTo(111,116); ctx.lineTo(106.333,111.333); ctx.lineTo(101.666,116); ctx.lineTo(97,111.333); ctx.lineTo(92.333,116); ctx.lineTo(87.666,111.333); ctx.lineTo(83,116); ctx.fill(); ctx.fillStyle = "white"; ctx.beginPath(); ctx.moveTo(91,96); ctx.bezierCurveTo(88,96,87,99,87,101); ctx.bezierCurveTo(87,103,88,106,91,106); ctx.bezierCurveTo(94,106,95,103,95,101); ctx.bezierCurveTo(95,99,94,96,91,96); ctx.moveTo(103,96); ctx.bezierCurveTo(100,96,99,99,99,101); ctx.bezierCurveTo(99,103,100,106,103,106); ctx.bezierCurveTo(106,106,107,103,107,101); ctx.bezierCurveTo(107,99,106,96,103,96); ctx.fill(); ctx.fillStyle = "red"; ctx.beginPath(); ctx.arc(101,102,2,0,Math.PI*2,true); ctx.arc(89,102,2,0,Math.PI*2,true); ctx.fill(); //繪制圓角矩形的方法 function roundedRect(ctx,x,y,width,height,radius){ ctx.moveTo(x,x+radius); ctx.beginPath(); ctx.lineTo(x,y+height-radius); ctx.quadraticCurveTo(x,y+height,x+radius,y+height); ctx.lineTo(x+width-radius, y+height); ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius); ctx.lineTo(x+width,y+radius); ctx.quadraticCurveTo(x+width,y,x+width-radius,y); ctx.lineTo(x+radius,y); ctx.quadraticCurveTo(x,y,x,y+radius); ctx.closePath(); ctx.stroke(); }
附加知識： 注：附加知識屬於提高或者不重要的知識，可以像思考題一樣對待
Path2d()
Path2D()會返回一個新初始化的Path2D對象（可能將某一個路徑作為變量——創建一個它的副本，或者將一個包含SVG path數據的字符串作為變量）。
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); //Path2D 示例 var rectangle = new Path2D(); rectangle.rect(10,10,50,50); var circle = new Path2D(); circle.moveTo(125,35); circle.arc(100,35,25,0,2*Math.PI); ctx.stroke(rectangle); ctx.fill(circle);
今天就講到這里，下節課我們講解：canvas顏色/透明度
關注公眾號，博客更新即可收到推送
