iT邦幫忙

2024 iThome 鐵人賽

DAY 26
0
Modern Web

無限...寶石?畫布啦!系列 第 26

Day 26 | 手寫的從前

  • 分享至 

  • xImage
  •  

day 26 banner

今天的主題是要在無限畫布上面可以用滑鼠或是手寫觸控寫字!

就是有點像是 JS 30 的 Fun With HTML Canvas (應該說是一模一樣啦)

但是!沒有加一點額外的東西好像就有點無聊 xD

所以這邊要變成是把作畫的過程可以紀錄下來,然後可以重播的!

沒錯!所以標題才那樣取的 xD

Demo

Demo 的連結在這裡

原始碼在這裡

就跟上面講的一樣除了手寫以外還可以把你手寫的字跡都記錄下來,並且可以重播。

因為實作的方式不是用錄影的方式再重播,所以可以做到一些效果例如說兩倍速(是說影片好像也可以做到 xD)

不過跟前面的 demo 一樣因為時間有限,實作有點花太多時間了,所以還是有些 bug 沒有修好。

這些 demo 的用意是要拋磚引玉,所以 bug 的部分我之後才會再慢慢修。

使用說明:

  1. 先按下面的開始錄製筆跡的按鈕
  2. 開始寫來寫去
  3. 按下停止錄製筆跡的按鈕
  4. 因為現在畫布上會有剛剛寫下的筆跡,所以有一個清空畫布的按鈕(不然重播會直接把東西重複畫上去)
  5. 按下重播錄製的筆跡觀看重播

因為最近庫存的文章開始消耗殆盡了 xD 所以後面三個實作雖然都還是有一定的完成度,但是文章的內容可能就會有點縮水。

那今天就這樣,大家明天見!


上一篇
Day 25 | 帶你環遊世界
下一篇
Day 27 | 前面轉個彎
系列文
無限...寶石?畫布啦!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言