基于canvas的温度油压控件

效果：

HTML代码：（引入控件js）

                        <div class="fcow_instrument">
                            <canvas id="oillPresure" width="150" height="150">
                            </canvas>
                        </div>
                        <div class="fcow_instrument">
                            <canvas id="tmpCanvas" width="100" height="150"></canvas>
                        </div>

JS代码：

//绘制油压canvas
drawCanvas.drawOillPresureCanvas(150,150,oillPresure,"oillPresure");
// 绘制温度计canvas
drawCanvas.drawTempratureCanvas(100,150,temp,"tmpCanvas");

控件代码：

;(function (root,fac) {
    root.drawCanvas=fac();
})(this,function () {
   var drawTempratureCanvas= function(width,height,temp,canvasId){
        var per =50;
        var canvas=document.getElementById(canvasId);
        var cxt=canvas.getContext('2d');
        var fontPx=15;
        let times= Math.floor(temp/per);
        var kd=[0+times*per,10+times*per,20+times*per,30+times*per,40+times*per,50+times*per];
        cxt.clearRect(0,0,width,he