經過 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)
結束
本次講了：繪制直線、繪制矩形、描邊和填充、清除矩形，大家學會了多少呢？
其實已經可以利用這些做一些好玩的事情了，比如五角星，多邊形，取色板等有趣的形狀，工具