H5 canvas基礎入門到捕魚達人小遊戲實現(1)

爲什麼學習canvas？

看見別人網頁一些非常炫酷的效果，羨慕不已，於是對canvas產生了濃厚的興趣，所以想仔細學習學習canvas.下面就一起來學習吧，本文爲系列文章，最後會編寫一個簡單版的捕魚達人小遊戲作爲結課標準。

小圖片走起~

什麼是canvas?

HTML5 的 canvas 元素使用 JavaScript 在網頁上繪製圖像。
畫布是一個矩形區域，您可以控制其每一像素。
canvas 擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法，可以創建豐富> 的圖形引用

好吧既然知道什麼是canvas就好辦了，我們來創建canvas畫布吧

HTML代碼

<canvas id="canvas" width="800" height="600" style="border:1px solid #ddd;display: block;margin:0 auto;"></canvas>

這樣我們就創建出一塊帶邊框的白色畫布了。當然也可以像普通元素一樣定義它的樣式。

獲取畫布對象

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

context.moveTo(100,100);
context.lineTo(400,400);
context.stroke();

看看畫出什麼來了？

canvas api

context.moveTo(x,y)：設置落筆點(x,y畫布位置)
context.lineTo(x,y)：畫到哪裏
context.stroke()：描邊(未添加樣式直接描邊就爲黑色)

一條黑色的線段還是太單調了，如果希望畫一個三角形呢？並且希望邊爲粉色的呢？

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

context.moveTo(100,100);
context.lineTo(200,100);
context.lineTo(100,300);
context.lineTo(100,100);
context.strokeStyle = "pink";
context.stroke();

效果：

canvas api

context.lineTo(x,y)：畫到哪裏，可以多次使用
context.strokeStyle = "pink";表示描邊顏色(還可以使用rgba(),rgb(),#000等幾種形式表達)

畫到這裏我們可能就會想，既然可以描邊，那麼肯定少不了填充了填充了

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.moveTo(100,100);
context.lineTo(200,100);
context.lineTo(100,300);
context.lineTo(100,100);
context.fillStyle = "red";
context.fill();

看看效果：

canvas api

context.fillStyle = "顏色值" ：填充顏色
context.fill()：填充圖形

來看看如何控制一條線條的粗細

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.moveTo(100,100);//設置落筆點
context.lineTo(500,100);//畫到的位置
context.lineWidth = 100; //線條寬度
context.stroke(); //描邊

想想下，其實就是一條黑色的橫線，但是寬度有100px，跟一個黑色的塊一樣

現在我們再來把線條添加寬度畫一個三角形看看效果

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

context.moveTo(100,100);
context.lineTo(400,100);
context.lineTo(300,300);
context.lineTo(100,100);
context.lineWidth = 10;
context.stroke();

注意圖片上的左上角 是不是缺了一個角，這是爲什麼呢？是不是沒有閉合？對就是缺閉合

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

context.moveTo(100,100);
context.lineTo(400,100);
context.lineTo(300,300);
context.lineTo(100,100);
context.closePath();//在這裏進行閉合試試
context.lineWidth = 10;
context.stroke();

這樣顯示就非常完美了！！！

閉合的另外一個小技巧。

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.moveTo(100,100);
context.lineTo(300,100);
context.lineTo(300,200);
context.lineTo(100,200);
gd.stroke();

看效果：

是的正常就這麼畫了，那麼現在如果想讓它閉合的話，估計大家也能猜到，直接添加closePath();

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.moveTo(100,100);
context.lineTo(300,100);
context.lineTo(300,200);
context.lineTo(100,200);
context.closePath();
gd.stroke();

它會自己去選擇起始點，並且閉合的。圖就不貼了就是一個長方形的描邊！

既然說到closePath的話那麼想想會不會有beginPath呢，答案是肯定的，它的含義是重新開始路徑，譬如，你想在畫布中畫兩條會不干擾的圖形的時候，就需要它了

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(200,100);
context.lineTo(200,300);
context.lineWidth = 20px;
context.strokeStyle = 'red';
context.stroke();

context.beginPath();
context.moveTo(300,100);
context.lineTo(300,300);
context.lineWidth = 20;
context.strokeStyle = 'green';
context.stroke();

看看圖形

大家可以試試把兩個beginPath() 都去掉會得到什麼樣的結果，就能理解它的意思了；

第一節的基礎大概就這麼多，後面還會很多很多好玩的東西，歡迎大家繼續關注，如果文章如有筆誤，請評論指正，碼字不易。