.

iT邦幫忙

IT EXPLAINED 數位轉型攻略 VII
Cyber Range 企業資安攻防實戰
Cloud Future Built Today
0

將GIF檔繪製於HTML5 CANVAS中(逐幀動畫)的問題

canvas javascript gif html5
toymonster 2018-08-27 12:10:32 ‧ 3113 瀏覽

  • 分享至 

  • xImage

大大好
canvas目前無法直接繪製gif檔上去
爬了好久的文終於找到相關方法(將gif拆解為四張)

但是礙於小弟接觸HTML5跟JS不久，經驗不夠豐富
目前碰到的問題是：

  1. GIF會延遲一秒後才跑出來
  2. GIF能夠成功跑起來了，但是會一直閃爍（本來推測是clearRect的關係，但是把各個clearRect都註解掉還是會閃爍）
  3. 沒辦法像drawImage那麼自由的使用，因為我是判斷倒數時間到，自動開跑。
    但是這套gif的程式碼我試著打破他重組，想讓它變成跟drawImage一樣可以設定圖片、座標跟大小，但是一直打破不了QQ... 不知道該怎麼改才好。
  4. gif圖除了會閃爍以外還算正常，但是到了終點停止的時候卻會變出好多分身...
跟著鄉民看熱鬧 iT邦高手 1 級 ‧ 2018-08-27 13:12:02 檢舉
能截一下畫面嗎？ 看一下你要的效果是什麼？
toymonster iT邦新手 5 級 ‧ 2018-08-27 14:05:06 檢舉
類似這種效果，只是我想做的是不用玩家操控，他會自己時間到了就開跑並且沒有障礙物跟跳躍（只有跑步的動作） https://youtu.be/D7Wwe2MoC6s?t=1m13s
登入發表討論
.
圖片
  直播研討會

1 個回答

0
跟著鄉民看熱鬧
iT邦高手 1 級 ‧ 2018-08-27 13:31:45

最好先簡化一下code，比較好釐清問題…

看更多先前的回應...收起先前的回應...
toymonster iT邦新手 5 級 ‧ 2018-08-27 14:24:12 檢舉

抱歉 其實簡化過了XD 想說盡量放完整點，至少能夠DEMO的程度><

跟著鄉民看熱鬧 iT邦高手 1 級 ‧ 2018-08-27 14:44:53 檢舉

圖片沒附上，無法試

toymonster iT邦新手 5 級 ‧ 2018-08-27 15:27:50 檢舉

已經自行找到解答了...謝謝

toymonster iT邦新手 5 級 ‧ 2018-08-28 09:33:46 檢舉

已經自行找到解答了...謝謝

登入發表回應

我要發表回答

立即登入回答
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22200 篇
完賽人數
600 人
iT+看影片追技術 看影片追技術 看更多
Deepfake 技術發展與疑慮
臺灣資安大會 |
23 分
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
.
熱門問題
.
熱門回答
熱門文章
IT邦幫忙