用canvas給自己的部落格園加背景（一）

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

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

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

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

我們要在html裡新增乙個canvas標籤，在js裡獲取這個元素，而canvas的主要屬性有widthheight，我們可以用js修改這兩個屬性讓canvas布滿整個螢幕，達到自適應，然後就是獲取2d上下文：

var canvas = document.queryselector("#canvas");
//寬高自適應
canvas.width = window.innerwidth;
canvas.height = window.innerheight;
//獲取2d上下文
var ctx = canvas.getcontext("2d");

/*為了看清楚畫布，我們可以描個邊*/ #canvas /*有習慣做reset的可以做全一點，這裡把body布滿頁面*/

body

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

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

修改這些屬性要通過上下文物件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()動畫。

用canvas給自己的部落格園加背景（一）

用canvas給自己的部落格園加背景（二）

被玩壞的部落格園之canvas裝飾部落格園側邊欄

給部落格園新增目錄

用canvas給自己的部落格園加背景（一）

用canvas給自己的部落格園加背景（二）

被玩壞的部落格園 之canvas裝飾部落格園側邊欄

給部落格園新增目錄

相關推薦

被玩壞的部落格園之canvas裝飾部落格園側邊欄