Canvas基礎篇：圖形繪制

圖形繪制
- moveTo()
- lineTo()
- - lineTo繪制一條直線
  - - 代碼示例
    - 效果預覽
  - lineTo繪制平行線
  - - 代碼示例
    - 效果預覽
  - lineTo繪制矩形
  - - 代碼示例
    - 效果預覽
- arc()
- - arc繪制一個圓
  - - 代碼實現
    - 效果預覽
  - arc繪制一段弧
  - - 代碼實現
    - 效果預覽
- arcTo()
- rect()
- 曲線
結語

圖形繪制

在之前的文章 Canvas基礎篇：路徑繪制中，講述了圖形繪制的四個步驟以及圖形開始路徑、閉合路徑、邊框模式和填充模式。
本文將講解在Canvas中，常見的幾種圖形繪制API。

moveTo()

moveTo()：將筆觸移動到指定的坐標 x 以及 y 上，該方法本身并不能畫出任何東西，可以理解為在Canvas上繪圖，需要落筆的起始位置。通常跟在 beginPath() 后面使用，或者在Canvas初始化時使用，其語法如下所示：

moveTo(x, y)

lineTo()

lineTo()方法用于繪制一條直線，其語法如下所示：

lineTo(x, y)

lineTo繪制一條直線

代碼示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>繪制直線</title>
</head><body><canvas id="canvas" width="400" height="400"></canvas><script>const canvas = document.getElementById('canvas')const ctx = canvas.getContext('2d')ctx.beginPath();ctx.moveTo(50, 50)ctx.lineTo(100, 100)ctx.stroke()</script>
</body></html>

效果預覽

繪制一條直線

lineTo繪制平行線

代碼示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>繪制平行線</title>
</head><body><canvas id="canvas" width="400" height="400"></canvas><script>const canvas = document.getElementById('canvas')const ctx = canvas.getContext('2d')ctx.beginPath()ctx.moveTo(50, 50)ctx.lineTo(150, 50)ctx.stroke()ctx.beginPath()ctx.moveTo(50, 100)ctx.lineTo(150, 100)ctx.stroke()</script>
</body></html>

效果預覽

平行線

lineTo繪制矩形

代碼示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>繪制矩形</title>
</head><body><canvas id="canvas" width="400" height="400"></canvas><script>const canvas = document.getElementById('canvas')const ctx = canvas.getContext('2d')ctx.beginPath()ctx.moveTo(50, 50)ctx.lineTo(150, 50)ctx.lineTo(150, 100)ctx.lineTo(50, 100)ctx.lineTo(50, 50)ctx.stroke()</script>
</body></html>

效果預覽

繪制矩形

arc()

arc()方法可以用來畫一個圓或者畫一個圓弧，，其語法如下所示：

arc(x, y, radius, startAngle, endAngle, anticlockwise)

其中，(x, y)代表圓心坐標；radius代表圓形半徑；startAngle和endAngle分別代表起始角度和終止角度；anticlockwise取值為布爾值，用來標記是順時針畫圓還是逆時針畫圓：值為true（默認值），表示順時針；值為false表示逆時針。
注：startAngle和endAngle是以弧度為單位，如180°應該是Math.PI
度數到弧度的轉換公式：
$弧度 = 度數 ? M a t h . P I /180$

arc繪制一個圓

代碼實現

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>繪制圓</title>
</head><body><canvas id="canvas" width="400" height="400"></canvas><script>const canvas = document.getElementById('canvas')const ctx = canvas.getContext('2d')ctx.beginPath()ctx.arc(100, 100, 50, 0, 2 * Math.PI, true)ctx.fill()</script>
</body></html>

效果預覽

arc繪制一段弧

代碼實現

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>繪制弧</title>
</head><body><canvas id="canvas" width="400" height="400"></canvas><script>const canvas = document.getElementById('canvas')const ctx = canvas.getContext('2d')ctx.beginPath()ctx.arc(100, 100, 50, 0, 90 * Math.PI / 180, false)ctx.closePath()ctx.stroke()</script>
</body></html>

效果預覽

繪制弧

arcTo()

arcTo()也用于繪制一段圓弧，其效果和arc()相同，且官網并不推薦這個方法，因為在某些情況下，它可能并不可靠，所以本文不做講解。

rect()

rect()方法用于繪制一個矩形，在 Canvas基礎篇：繪制矩形一文中講述過，本文不再贅述。

曲線

圓弧是一種特殊的曲線，弧線上每一點的曲率都相同；曲線上每個點的曲率就不一定了。Canvas中有兩種支持繪制曲線的方式：二次貝塞爾曲線和三次貝塞爾曲線，該內容在后面的文章中會詳細講解。

結語

本文主要介紹了Canvas中幾種圖形的繪制方式，包括直線、圓弧等。對于文章中錯誤的地方或者有任何問題，歡迎在評論區留言分享！

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/pingmian/78962.shtml
繁體地址，請注明出處：http://hk.pswp.cn/pingmian/78962.shtml
英文地址，請注明出處：http://en.pswp.cn/pingmian/78962.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！