canvas畫案例《機器人》和《Hello Kitty》

首先對canvas基礎語法進行必定的瞭解和學習，語句很少很快就能夠看完用法，而後實戰畫一個《機器人》和《 Hello Kitty》，實操多了就會對canvas有更深的理解。（後附源代碼）

canvas基礎

準備工做

body標籤中先直接添加<canvas> <canvas/>標籤，Canvas（畫布）默認寬高：300*150 在js中，想使用canvas，要先獲取canvas標籤， var canvas = document.getElementById('myCanvas');再獲取canvas的繪圖環境： var ctx = canvas.getContext('2d'); canvas的長寬（大小）只能用行內嵌入的樣式或者用js設置。 設置寬度爲800，高度爲800： canvas.width=800; canvas.height=800;

基礎繪圖

畫線段

ctx.moveTo(0, 0);//繪製的原點(起點).moveTo()
ctx.lineTo(100, 100);//繪製的終點.lineTo()
ctx.lineTo(100, 200);
ctx.strokeStyle = '#F00';//設置線段的樣式/顏色
ctx.stroke();//繪製路徑.stroke()
複製代碼

若是鏈接兩個lineTo就是從原有的基礎上再接着繪製，若是超出畫布的大小，則沒法顯示。

畫三角形

三條不一樣顏色的線組成的三角形

ctx.moveTo(300,100);
ctx.lineTo(500,400);
ctx.strokeStyle = "#00F";
ctx.stroke();
ctx.beginPath();//.beginPath()清除以前畫的路徑，從新開始新的路徑
ctx.moveTo(500,400);
ctx.lineTo(100,400);
ctx.strokeStyle = "#0F0";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100,400);
ctx.lineTo(300,100);
ctx.strokeStyle = "#F00";
ctx.stroke();
複製代碼

畫圓

ctx.arc(300,300,50,0,2*Math.PI,true);//參數：300--圓心x、300--圓心y、50--半徑、0,2*Math.P--弧度範圍、true--逆時針/false順時針；
ctx.strokeStyle = '#000';
ctx.stroke();
複製代碼

矩形

ctx.strokeRect(300，100，200,100);//無需再使用ctx.stroke（）,已經封裝在內；
//參數：300，100--左上角座標，200--寬度，100--高度
複製代碼

填充

ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.lineTo(100,200);
ctx.closePath();//閉合路徑，此處爲一個三角形
ctx.lineWidth = 10;//lineWidth 設置描邊的線寬
ctx.strokeStyle = "#F00";//strokeStyle 設置描邊樣式
ctx.stroke();
ctx.fillStyle = "rgba(0,255,0,0.5)";//fillStyle 設置填充樣式
ctx.fill();//填充，至關於繪製路徑中的stroke()

ctx.strokeRect(100,200,100,100);//繪製一個矩形路徑
ctx.fillRect(100,200,100,100);//填充一個矩形

ctx.beginPath();
ctx.arc(300,100,50,0,2*Math.PI,true);
ctx.fillStyle = "rgba(0,0,255,0.5)";
ctx.fill();//填充一個圓

複製代碼

二次樣條曲線和貝塞爾曲線

//繪製二次樣條曲線
ctx.moveTo(100,355);//moveTo()爲曲線兩端的第一個點；
ctx.quadraticCurveTo(265,145,380,349);//265,145爲中間點（影響曲線曲度），380,349爲末端點
ctx.stroke();

//繪製貝塞爾曲線
ctx.beginPath();
ctx.moveTo(175,375);//moveTo()爲曲線兩端的第一個點；
ctx.bezierCurveTo(297,182,468,252,517,380);//297,182中間第一個點 468,252中間第二個點 517,380末端點
ctx.stroke();
複製代碼

基本用到的基礎就這麼多了，還有平移、轉換、陰影、圖片、裁剪、離屏等等就不在這一篇章講了，有興趣能夠自行去百度搜索瞭解學習。

小案例一：機器人

（案例圖片原圖引自慕課網課程，若有侵權，請聯繫做者刪除，源代碼是做者自行編譯）
用的都是上面所說的基礎，但願看了上面的基礎，能夠自行思考畫出來，須要畫成這個樣子：

源代碼： github地址含主要代碼註釋

小案例二：Hello Kitty

（案例圖片原圖引自慕課網課程，若有侵權，請聯繫做者刪除，源代碼是做者自行編譯）
成品效果以下：

源代碼： github地址含主要代碼註釋

多謝觀看，若有錯誤，但願聯繫或評論指出，謝謝！