canvas入門篇

最近在折騰canvas，寫一點筆記。

註：本文面向canvas入門的前端，寫的如有紕漏請指出，不喜勿噴。

這一系列的文章最終結果是做出本人博客的動態背景，不過凡事都要循序漸進，我們先從最簡單的繪制開始。

本人接觸電腦的第一個繪圖工具就是Windows自帶的畫圖。畫圖的流程很簡單，選好填充顏色、線條顏色、粗細，用鼠標選好形狀就可以畫出來了，而且每次重新改變填充顏色、線條顏色、粗細只會對後面的繪制的形狀起作用（聽起來就是廢話，但是我們繪制canvas的思路也是如此）。

創建canvas畫布

首先要有一塊畫布，我們才能往裏面畫東西。

我們要在html裏添加一個canvas標簽，在js裏獲取這個元素，而canvas的主要屬性有width height，我們可以用js修改這兩個屬性讓canvas布滿整個屏幕，達到自適應，然後就是獲取2d上下文：

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

var canvas = document.querySelector("#canvas");
//寬高自適應
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
//獲取2d上下文
var ctx = canvas.getContext("2d");

/*為了看清楚畫布，我們可以描個邊*/
#canvas{
    border: 1px solid black;
}
/*有習慣做reset的可以做全一點，這裏把body布滿頁面*/
body{
    margin: 0;
    padding: 0;
}

繪圖的畫布到這裏就創建完了，目前canvas的背景是透明的（可以按f12看一下）。

繪制樣式

想要繪制形狀，先要有繪制樣式，當然canvas有默認的繪制樣式，我主要介紹自己常用的，有興趣的可以自己去深入了解。

• fillStyle填充屬性，支持十六進制，rgb，rgba填充，顏色名稱
• strokeStyle描邊屬性，支持十六進制，rgb，rgba填充，顏色名稱
• lineWidth線條屬性，數值

修改這些屬性要通過上下文對象ctx

ctx.fillStyle = "green";
ctx.strokeStyle = "black";
ctx.lineWidth = 3;

繪制形狀

和畫圖一樣，我們繪制的形狀有線、矩形、弧和多邊形，圓是包含在弧裏面的，這些API也很容易看得懂。

開始路徑

這點非常重要，雖然沒有這行代碼也可以繪制圖形，但是每次圖形的繪制會在上一個圖形的結束點開始繪制，這明顯不是我們想要的結果，所以務必在每個形狀繪制前加入這麽一行代碼。

ctx.beginPath();

矩形

矩形是默認的形狀，有自己的fillRect()和strokeRect()。

//填充矩形：ctx.fillRect(x坐標,y坐標,width寬度,height高度);
ctx.fillRect(50,50,100,100);
//描邊矩形：ctx.strokeRect(x坐標,y坐標,width寬度,height高度);
ctx.strokeRect(50,50,100,100);

圓（弧）

弧只是路徑，光靠arc()只能定義路徑，需要用fill()和stroke()才能填充和繪制。

//圓路徑：ctx.arc(x坐標,y坐標,r半徑,開始弧度,結束弧度,布爾值);
ctx.arc(100,100,50,Math.PI/180*0,Math.PI/180*360,false);
//填充圓
ctx.fill();
//描邊圓
ctx.stroke();

線

線是路徑，兩點成線，所以要定義開始點moveTo()，目標點lineTo()。

//定義線的起始點
ctx.moveTo(460,460);
//定義目標點
ctx.lineTo(500,500);
//折線
ctx.lineTo(400,600);
//折線
ctx.lineTo(200,600);
//繪制線條
ctx.stroke();

多邊形

多邊形其實也是線，一開始我們說要用beginPath()重新定義開始的點，而繪制多邊形則要閉合路徑closePath()。

//繪制等腰三角形
ctx.beginPath();
ctx.moveTo(200,200);
ctx.lineTo(150,300);
ctx.lineTo(250,300);
//閉合路徑
ctx.closePath();
ctx.stroke();

本節先講基礎的繪制知識，下一節內容會介紹requestAnimationFrame()動畫。

文章來源：