1 線段(直線路徑)

繪制線段一般步驟:

moveTo(x,y) 移動畫筆到指定的坐標點(x,y)

lineTo(x,y) 使用直線連接當前端點和指定的坐標點(x,y)

stroke() 根據當前的畫線樣式，繪制當前或已經存在的路徑

2 矩形路徑

繪制矩形路徑一般步驟:

rect(x, y, width, height) 矩形路徑，坐標點(x,y)，width height寬高

stroke()或fill 根據當前的樣式，繪制或填充路徑

也可使用前文提到的strokeRect或fillRect, 或者是通過lineTo拼接成矩形

3 圓弧路徑

先看下繪制圓弧的api:

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

x, y 圓弧中心， radius 圓弧半徑, startAngle 起始點, endAngle 圓弧終點, anticlockwise 默認為順時針, true逆時針

CSS中做旋轉用到都是角度(deg)，但是arc函數中表示角的單位是弧度，不是角度。角度與弧度的js表達式: 弧度 = (Math.PI/180) * 角度(deg)。

這里弧度是以x軸正方向為基準、默認順時針旋轉的角度來計算

圖示：

(圖片來自大漠)

ctx.beginPath();

ctx.arc(200, 100, 100, 0, Math.PI / 2, false);

ctx.closePath();

ctx.stroke();

ctx.fill();

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

總結

以上是生活随笔為你收集整理的html坐标绘制路径,canvas学习笔记之绘制简单路径的全部內容，希望文章能夠幫你解決所遇到的問題。

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