經過 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)

結束

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

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

好了，本次的教程就到這里結束了，下次將為大家帶來曲線相關的繪制

總結

以上是生活随笔為你收集整理的java canvas类画直线_canvas教程(二) 绘制直线的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。