經過 "canvas 教程(一) 簡介" 我們知道了 canvas 的一些基本情況 而本次是給大家帶來直線的繪製 canvas 中，基本圖形有兩種，一種是直線，還有一種是曲線 但是無論是直線還是曲線，我們都應該先瞭解 canvas 的坐標系 s canvas 的坐標系 要繪製之前肯定要瞭解一下 ca ...
經過 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)
結束
本次講了：繪製直線、繪製矩形、描邊和填充、清除矩形，大家學會了多少呢？
其實已經可以利用這些做一些好玩的事情了，比如五角星，多邊形，取色板等有趣的形狀，工具
好了，本次的教程就到這裡結束了，下次將為大家帶來曲線相關的繪製
