Canvas繪製任意正多邊形

2021-10-09 02:48:48 字數 998 閱讀 4048

繪圖方式

**1、任意正多邊形都存在與乙個外接圓。

2、外接圓的圓心為正多邊形的中心重心(到各邊的距離相等,到各角的距離相等=外接圓半徑)

3、中心到各個角的連線將正多邊形n等分(n = 正多邊形邊數),同時將圓心角(2π)n等分。

我們已正八邊形為例,如下圖所示:

1、座標系上任意一點到圓心的連線,我們可以用 θ 來表示。

2、上述連線上的任意點的座標可以表示為(r * cosθ,r * sinθ),其中r是該點到(0,0)的距離,θ是直線與x座標軸的夾角(0 <= θ

<= 2π)

假設我們要繪製乙個正n邊形,他的外接圓半徑為r,圓心角被平分為θ(θ = 2π/n)。

那麼正多邊形所有的頂點座標分別是:

(r * cos(θ * 0),r * sin(θ * 0))

(r * cos(θ * 1),r * sin(θ * 1))

(r * cos(θ * 2),r * sin(θ * 2))

…(r * cos(θ * n),r * sin(θ * n))

我們只需要將這些點連起來就可以獲得乙個正多邊形

>

>

"mycanvas"

width

="400"

height

="400"

style

="border

:1px solid #d3d3d3;

">

your browser does not support the html5 canvas tag.

canvas

>

AutoCAD 2008 繪製正多邊形

通過 正多邊形 命令,可以建立具有3至1024條等長邊的閉合多段線。它的形狀由其所包含的邊數構成,邊數越多,它的形狀就越接近於圓形。當正多邊形的邊數為4時,可建立出乙個正方形。本例將通過繪製圖3 49所示的天花板頂燈圖形,來學習正多邊形的3種繪製方法和操作技巧。圖3 49 例項效果 1 執行 開啟 ...

Canvas繪製正多邊形及五角星

一般常用的繪圖技術有三種 svg,canvas和webgl 在正式使用canvas繪製多邊形及五角星之前,請允許我向大家簡單的介紹下canvas繪圖之路徑的基本語法結構 ctx.beginpath 開始一條新路徑 ctx.closepath 閉合當前路徑 ctx.linewidth 1 描邊寬度 c...

canvas繪製多邊形並填充

let canvas document.getelementbyid canvas canvas.width 800 畫布寬度 canvas.height 800 畫布高度 let context canvas.getcontext 2d canvasmonth context,100,100,40...