canvas教程(二) 繪製直線

通過 canvas 教程(一) 簡介 咱們知道了 canvas 的一些基本狀況

而本次是給你們帶來直線的繪製

canvas 中，基本圖形有兩種，一種是直線，還有一種是曲線
可是不管是直線仍是曲線，咱們都應該先了解 canvas 的座標系 s

canvas 的座標系

要繪製以前確定要了解一下 canvas 的座標系，咱們以前確定接觸過數學座標系：y 軸正方向是向上的

其實在前端領域裏幾乎全部的座標系都是使用的 w3c 的座標你，canvas 也是同樣，w3c 的座標系和數學座標系的區別就在於：w3c 座標系的 y 軸正方向是向下的

繪製直線

canvas 中繪製直線可使用 moveTo 和 lineTo 兩個方法，咱們看看繪製一條直線的語法是怎麼樣的

context.moveTo(x1, y1); //將畫筆移動至座標(x1,y1)做爲新的起點
context.lineTo(x2, y2); //從起點畫線到(x2,y2)並以此做爲新的起點
context.stroke(); //描邊連線

stroke 是指描邊，對應的還有 fill 填充，咱們在下面的繪製中試一試便知道是什麼意思了

moveTo 和 lineTo 是能夠重複使用來同時繪製多條直線

因此咱們能夠進行繪製三角形，矩形等

描邊三角形：

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

填充矩形：

context.moveTo(50, 50);
context.lineTo(50, 100);
context.lineTo(150, 100);
context.lineTo(150, 50);
context.lineTo(50, 50);
context.fill();

是吧，咱們很容易就理解了其中的區別。

繪製矩形

那麼在咱們開發當中，矩形是很是常見的，但咱們發現一條一條的直線繪製是一件很麻煩的事情，因此 canvas 也帶有了繪製矩形的方法: rect(x, y, width, height)

其中 x,y 表明繪製起點 width 和 height 分別要繪製的矩形的寬和高

而在咱們繪製的時候能夠修改顏色便是描邊顏色：strokeStyle 和填充顏色：fillStyle

這兩個屬性的取值分爲三種 1.顏色值 2.漸變色 3.圖案
後面兩種暫且不表，顏色則支持十六進制、顏色關鍵字（例如：red）、rgb、rgba

因此繪製矩形的步驟是

context.strokeStyle = 'red'; //1. 設置描邊顏色
context.rect(50, 50, 100, 50); //2. 繪製矩形
context.stroke(); //3. 描邊

canvas 也提供了另外兩種繪製矩形的方法：描邊矩形和和填充矩形
就是上面的 2，3 的結合
填充和描邊的分別是 fill 和 stroke 那麼填充矩形和描邊矩形的方法就是 fillRect 和 strokeRect 了
語法均是一致的

⚠️ strokeStyle 和 fillStyle 必須在繪製以前設置，不然無效

清除畫布

有繪製矩形的方法，也有清除矩形的方法，這裏的清除矩形不是指清除以前畫的全部矩形，而是指在畫布清除指定矩形區域
方法名字爲 clearRect，屬性和繪製矩形是一致的

因此咱們之後也會常常用到這個方法來，用來清空整個 canvas，即 context.clearRect(0,0,canvas.width,canvas.height)

結束

本次講了：繪製直線、繪製矩形、描邊和填充、清除矩形，你們學會了多少呢？

其實已經能夠利用這些作一些好玩的事情了，好比五角星，多邊形，取色板等有趣的形狀，工具

好了，本次的教程就到這裏結束了，下次將爲你們帶來曲線相關的繪製