基于HTML5的canvas的温度计 插件

该插件是基于HTML5的canvas实现的温度计 使用方法： 第一步，引入jquery和插件 <script src='./jquery.min.js'></script> <script src = './goal-thermometer.js'></script>

第二步，添加dom节点

<div style="width:200px;height:230px;float:left;"id="demo"></div> <div style="width:250px;height:300px;float:left;"id="demo1"></div> <div style="width:300px;height:400px;float:left;"id="demo2"></div> <div style="width:350px;height:450px;float:left;"id="demo3"></div>

第三步，创建温度计对象实例

var temper = new canvasPanel(); var temper1 = new canvasPanel(); var temper2 = new canvasPanel(); var temper3 = new canvasPanel();

第四步，设置对应参数

temper3.bgColor = 'rgb(159,159,3)'; temper2.bgColor = 'rgb(3,159,3)'; temper1.bgColor = 'rgb(159,3,3)'; temper2.MaxNum = 200; temper2.MinNum = 20;

第五步，初始化温度计实例

temper.init('demo'); temper1.init('demo1'); temper2.init('demo2'); temper3.init('demo3');

如果想要实现实时数据变化，只需要调用paintNowValue方法，传入当前值即可。例：

setInterval(function(){ var num = Math.round(Math.random()*100); var num1 = Math.round(Math.random()*100); var num2 = Math.round(Math.random()*180)+20; var num3 = Math.round(Math.random()*100); temper.paintNowValue(num); temper1.paintNowValue(num1); temper2.paintNowValue(num2); temper3.paintNowValue(num3); },1000);

插件及demo代码链接地址：http://download.csdn.net/detail/xiaoxiazi_32/9813224