canvas繪製多邊形並填充

2021-09-29 20:18:44 字數 874 閱讀 1532

let canvas=document.getelementbyid("canvas");

canvas.width=800; //畫布寬度

canvas.height=800; //畫布高度

let context=canvas.getcontext("2d")

canvasmonth(context,100,100,400,400,10,"#058","red");

/*** canvas狀態繪製機制 多邊形 矩形

* beginpath 表示從這裡開始繪製

* closepath 封閉多邊形繪製結束方法

* fill 封閉多邊形填充開始方法

* @param context 屬於誰

* @param movetox 線條起點 x座標 型別number

* @param movetoy 線條起點 y座標 型別number

* @param linetox 線條終點 x座標 型別number

* @param linetoy 線條終點 y座標 型別number

* @param linewidth 線條寬度 型別number

* @param strokestyle 線條顏色 型別string

* @param fillstyle 封閉圖形顏色 型別string

*/function canvasmonth(context,movetox,movetoy,linetox,linetoy,linewidth,strokestyle,fillstyle)

參考鏈結

Canvas繪製任意正多邊形

繪圖方式 1 任意正多邊形都存在與乙個外接圓。2 外接圓的圓心為正多邊形的中心 重心 到各邊的距離相等,到各角的距離相等 外接圓半徑 3 中心到各個角的連線將正多邊形n等分 n 正多邊形邊數 同時將圓心角 2 n等分。我們已正八邊形為例,如下圖所示 1 座標系上任意一點到圓心的連線,我們可以用 來表...

凹 凸 分離多邊形的填充繪製

步驟 1.建立多邊形 按順時針順序逐個提供座標點。2.繪製。繪製步驟 1.計算外接矩形 就是逐個座標點比較,最後得到乙個剛好框住該多邊形的矩形。2.製作bitmap 位圖或者說柵格圖 根據外接矩形的大小,自行分配記憶體,製作乙個柵格圖。3.填寫柵格圖 畫線 在柵格圖把各個點座標和連線先畫上 畫直線的...

MFC 用gdi繪製填充多邊形區域

mfc 用gdi繪製填充多邊形區域 這裡的 是實現乙個三角形的繪製,並用刷子填充顏色 在onpaint 函式裡面 運用的是給定的三角形的三個點,很多個點可以繪製多邊形 cpp view plain copy cbrush br rgb 40,130,170 crgn rgn cpoint arrpt...