src/chart/hyxCanvas.js

// hyxCanvas.js

window.onload=function(){
        var points = [];
        logFlag = 0;
        initCanvas();
        /*inter = setInterval(function(){
            var newPoint = Math.random()*200;
            if(points.length>60){
                points.shift();
            }
            points.push(newPoint);
            drawLines(points);

        },1000);
        clearInterval(inter);*/
    }

    canvWidth = 600;
    canvHeight = 400;   
    (function gl(){
        g = "aaa";        
        env = 11;
        val = 22;
        container = null;
        getVal = function (){
            return val;
        }
    })();
    //匿名函数中的全局变量自动附加为 window的属性（window代表窗体，包含location，history）

    function gele(id){
        return document.getElementById(id);
    }

    function local(name,age){
        this.name = name;
        this.age = age;
        return this;
    }
    //绘制直线和曲线路径 beginPath()开始新路径 moveTo()设定起点 lineTo()直线 arcTo()
    function initCanvas(){
        //var container = document.createElement('canvas');
        container = gele("canv");
        container.width = canvWidth;
        container.height = canvHeight;
        
        ctx = container.getContext('2d');
        ctx.strokeStyle = "#03A9F4";
        ctx.lineWidth = 1;
                
    }    
    //var inter = setInterval(drawRect,1000);
    //inter.clear();

    var drawRect = function(){
        //清除上次的结果
        clearCanv();
        //定义随机颜色填充
        //ctx.fillStyle = randRgba();
        ctx.fillStyle = "#03A9F4";
        var barX = -10, barHeight;
        for (var i = 18; i >= 0; i--) {
            barX += 30;
            barHeight = Math.random()*-200;
            //ctx.strokeRect(barX,canvHeight,20, barHeight);
            ctx.fillRect(barX,canvHeight,20, barHeight);
        }        
    }

    // 绘制线 比较特别，一段折线需要一个起始点。用moveTo指定起始点。
    // 需要传入一个点数据进入队列，var 
    function drawLine(){
        clearCanv();
        //定义随机颜色填充
        ctx.beginPath();
        ctx.strokeStyle = "#03A9F4";
        //定义线条宽度（像素）
        ctx.lineWidth = 2;
        var pointX = 20, pointY = Math.random()*200;
        ctx.moveTo(pointX, pointY);
        for (var i = 18; i >= 0; i--) {
            pointX += 30;
            pointY = Math.random()*200;
            ctx.lineTo(pointX,pointY);            
        }
        //闭合曲线，可以填充为多边形。
        //ctx.closePath();
        ctx.stroke();
    }

    //针对流数据的展示，从最后一个点开始绘制。
    function drawLines(points){
        clearCanv();
        ctx.beginPath();
        ctx.lineStyle = "#03A9F4";
        ctx.lineWidth =2;
        var pointX = canvWidth;
        if( points instanceof Array ){
            var pnums = points.length;
            var pointY = points[pnums-1];
            ctx.moveTo(pointX, pointY);
            for (var i = points.length - 2; i >= 0; i--) {
                pointY = points[i];
                pointX -= 10;
                ctx.lineTo(pointX, pointY);
            }
            ctx.stroke();
        }
    }

    function deg2rad(deg){
        return deg * Math.PI / 180;
    }
    function rad2deg(rad){
        return rad * 180 / Math.PI;
    }

    //arc 绘制弧线。
    function drawArc(){
        //arc(x,y,radius,startAngle,endAngle,anticlockwise)
        var endAgle = 0.0;
        //开始一个新的绘制路径
        ctx.beginPath();
        ctx.strokeStyle = "blue";
        //ctx.moveTo(x, 190);
        endAgle +=(2 * Math.PI)/5;
        ctx.arc(50,50,50,0,Math.PI/2,false);
        ctx.stroke();        
    }
    //drawArc();

    var randColor =  function(){

        var hexR = Math.floor( Math.random()*255).toString(16);
        var hexG = Math.floor( Math.random()*255).toString(16);
        var hexB = Math.floor( Math.random()*255).toString(16);
        return "#"+ hexR +hexG +hexB;
    }

    // 函数表达式，必须在调用前声明。
    var randRgba = function (){
        var decR = Math.floor( Math.random()*255);
        var decG = Math.floor( Math.random()*255);
        var decB = Math.floor( Math.random()*255);
        return "rgba(" + decR + "," + decG + "," + decB + "," + "0.5)";
    }

    // 函数声明，在按顺序执行JS代码 之前就解析。
    function drawPoint(x, y, width){
        if (typeof x == "number" && typeof y == "number"){
            ctx.beginPath();
            //定义随机颜色边线 randRgba();
            ctx.strokeStyle = "rgba(255,255,255,0.7)";
            ctx.fillStyle = "rgba(10,10,200,0.5)";
            ctx.strokeWidth = 1;
            if (typeof arguments[2] == "undefined"){
                var width = 4;
            }
            ctx.arc(x, y, width, 0, Math.PI*2, false);
            //ctx.stroke();
            ctx.fill();
        }
        else return;
    }

    //随机生成 泡泡点
    function randPoint(nums){
        if(typeof nums == "number"){
            clearCanv()
            var pointX, pointY;
            for (var i = nums - 1; i >= 0; i--) {
                pointX = Math.random()*canvWidth;
                pointY = Math.random()*canvHeight;
                radius = Math.random()*10;
                drawPoint(pointX, pointY, radius);
            };            
        }

    }
    function clearCanv(){
        ctx.clearRect(0,0,canvWidth,canvHeight);
    }