將GIF檔繪製於HTML5 CANVAS中(逐幀動畫)的問題 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0

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

canvas javascript gif html5

toymonster 2018-08-27 12:10:32 ‧ 3070 瀏覽

分享至

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

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

GIF會延遲一秒後才跑出來
GIF能夠成功跑起來了，但是會一直閃爍（本來推測是clearRect的關係，但是把各個clearRect都註解掉還是會閃爍）
沒辦法像drawImage那麼自由的使用，因為我是判斷倒數時間到，自動開跑。
但是這套gif的程式碼我試著打破他重組，想讓它變成跟drawImage一樣可以設定圖片、座標跟大小，但是一直打破不了QQ... 不知道該怎麼改才好。
gif圖除了會閃爍以外還算正常，但是到了終點停止的時候卻會變出好多分身...

跟著鄉民看熱鬧 iT邦高手 1 級 ‧ 2018-08-27 13:12:02 檢舉

能截一下畫面嗎？看一下你要的效果是什麼？

toymonster iT邦新手 5 級 ‧ 2018-08-27 14:05:06 檢舉

類似這種效果，只是我想做的是不用玩家操控，他會自己時間到了就開跑並且沒有障礙物跟跳躍（只有跑步的動作） https://youtu.be/D7Wwe2MoC6s?t=1m13s

登入發表討論

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

1 個回答

0

跟著鄉民看熱鬧

iT邦高手 1 級 ‧ 2018-08-27 13:31:45

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

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

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 檢舉

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

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22200 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙