動畫天氣圖標多次使用

我剛剛嘗試在一頁中多次使用天氣圖標。 http://weathericons.char95.com/動畫天氣圖標多次使用

，但問題是在ID帆布：

<canvas id='icon1'></canvas> 
<canvas id='icon'></canvas> 
<canvas id='icon1'></canvas> 


var icon1 = WeatherIcon.add('icon1', WeatherIcon.SUN, {mode:WeatherIcon.NIGHT, stroke:true, shadow:true, animated:true });

我認爲，問題出在「ID」。我必須使用「CLASS」。但我不知道如何更改代碼。

來源

2016-06-07 lokalinjo

你得到任何錯誤？嘗試在畫布中添加寬度和高度屬性。例如''。還可以使用'icon1.play（）'來播放第一個圖標動畫。然後當你需要'icon1.stop（）;'並且啓動另一個'icon2.play（）;'時停止它。據我所知你還沒有不受歡迎的HTML編程。你爲什麼不從你提供的網站複製整個示例代碼並使用它？ – 2016-06-07 10:53:34

嘗試使用網站中的示例。並得到一個不錯的JS書。 :)我推薦：http://shop.oreilly.com/product/9780596805531.do – 2016-06-07 10:59:06

謝謝，我需要改變類的ID。在這種情況下，我可以使用多個相同的圖標。我不知道該怎麼做。 – lokalinjo

HTML/PHP/CSS沒問題，但我不適合Javascrpit。

<script type='text/javascript' src='WeatherIcon.js'></script> 


<canvas id='icon1'></canvas> 
<canvas id='icon2'></canvas> 
<canvas id='icon3'></canvas> 



<script type='text/javascript'> 

WeatherIcon.add('icon1' , WeatherIcon.SUN , { mode:WeatherIcon.DAY , stroke:true , shadow:true , animated:true }); 
WeatherIcon.add('icon2' , WeatherIcon.LIGHTRAINSUN , { mode:WeatherIcon.NIGHT , stroke:true , shadow:true , animated:true }); 
WeatherIcon.add('icon3' , WeatherIcon.LIGHTRAINTHUNDERSUN); // no parameters

JS：http://weathericons.char95.com/js/WeatherIcon.js

來源

2016-06-07 11:03:16 lokalinjo

如果庫僅作爲參數* only *'id'，則不能更改爲'class'。如果這些示例僅適用於'id's'，那麼它就是庫的結構。 – 2016-06-07 11:09:31

還有一些其他的例子：http://stackoverflow.com/questions/24572100/skycons-cant-display-the-same-icon-twice thay使用CLASS而不是ID。 – lokalinjo

很高興你解決了它。說實話，我不明白你問了什麼。實際上沒有問題。你剛纔說「但問題是畫布上的ID：」。請閱讀關於如何在這裏提出stcackoverflow以便更詳細，讓社區更好地幫助你。請參閱此處的完整指南：https：//stackoverflow.com/help/asking – 2016-06-08 09:54:31

動畫天氣圖標多次使用

回答

相關問題