动画天气图标多次使用

我刚刚尝试在一页中多次使用天气图标。 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

动画天气图标多次使用

回答

相关问题