iT邦幫忙

0

網頁作圖推薦方式[已解決]

  • 分享至 

  • xImage

最近想要在網頁上,將感測器資料,以即時方式呈現,目前有收尋到可以用Canvas方式作圖,好奇問一下版上的大大們,如果換作是你們,會使用何種方式將它呈現在網頁上?

froce iT邦大師 1 級 ‧ 2022-01-21 14:11:05 檢舉
https://dcdrkim.pixnet.net/blog/post/313576476-html-5-canvas-vs.-svg

這種我覺得SVG也可以用。
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

2
froce
iT邦大師 1 級 ‧ 2022-01-21 15:42:26
最佳解答

簡易雛形。
https://jsbin.com/homaditaha/edit?html,output

我不知道你的裝置傳什麼資料出來,假設資料是 -1~1之間。

andow1198 iT邦新手 4 級 ‧ 2022-01-25 13:52:40 檢舉

太神了~謝謝F大提供的資源,我會好好筆記下來/images/emoticon/emoticon33.gif

1
Samuel
iT邦好手 1 級 ‧ 2022-01-21 13:16:49

canvas最快了
HTML5_canvas_API使用方法
https://coolmandiary.blogspot.com/2016/01/html5canvasapi.html
HTML5_利用canvas_API_製作精美時鐘方法(旋轉/縮放/移動/畫線)_part1
https://coolmandiary.blogspot.com/2016/02/html5canvasapi.html
HTML5_利用canvas_API_製作精美時鐘方法(日期對象)_part2
https://coolmandiary.blogspot.com/2016/02/html5canvasapipart2.html
HTML5_利用canvas_API_製作精美時鐘方法(整合)_part3
https://coolmandiary.blogspot.com/2016/02/html5canvasapipart3.html

andow1198 iT邦新手 4 級 ‧ 2022-01-21 13:43:18 檢舉

好的,謝謝S大的支援,我這就去好好學習!!/images/emoticon/emoticon34.gif

我要發表回答

立即登入回答