Canvas 繪製座標系中的點以及折線

2021-10-02 04:21:31 字數 1098 閱讀 5632

示例圖如下:

可以看到這裡繪畫的座標點比較大,為了更好看一些。其實不管大小,基本的繪製步驟如下:

設定座標點的中心圓點位置(x0,y0)

設定座標點的大小 dotsize

計算座標點的上下左右四角的點座標

條件1和2可以直接通過設定獲取,而座標點上下左右四角座標看看下面的計算示意圖。

從上圖可以看到要繪製乙個正方形座標點的上下左右四角點座標的計算方式。

下面來具體示例**。

瀏覽器顯示如下:

這樣來看,就繪畫好了單個座標系中的點了,下面來增加複雜度,因為一般座標系的點不會只單一畫乙個,一般都是後台返回多個點的座標,然後一起繪畫。

那麼下面將繪製點的過程寫成乙個方法,然後定義多個點的座標,進行多點繪製。

瀏覽器顯示如下:

那麼如果是折線圖的話,那就還需要將這些多點連線起來,形成乙個折線圖。

如果要連線多點,形成一點直線,那麼每一條連線的線段都需要知道起點和終點。

對於第乙個點,那麼起點就是座標原點。

對於第二個點開始,起點就是上乙個點的座標,自身座標就是終點。

那麼在這裡關鍵就是要定義好座標系的原點,作為第乙個點的起點,後續的點只要將上乙個點的座標進行記錄,然後將線條繪製起來,就可以形成折線圖了。

瀏覽器顯示效果如下:

09 canvas繪製座標系

1 doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title 09 canvas繪製座標系 title 6 style 7 11canvas 16style 17head 18 body 19 canvas width 500 h...

canvas繪製中的API

canvas繪製z 先貼 吧 1 2 created by administrator on 2016 1 26.3 4vari 5 function draw id 11function painting view code 這裡值得一提的是setinterval方法。格式 setinterval...

直角座標系下點繞點旋轉的座標計算

直角座標系下一點 x 0,y0 繞某一點 x y 逆時針旋轉角度 後的座標 x 1,y1 的座標計算公式為x1 x0 x c os y 0 y sin x y1 x0 x si n y0 y c os y 這裡舉乙個小例子,藍色箭頭表示原始位置,紅色箭頭表示順時針旋轉2.259弧度後的結果。這裡列出...