HTML JS的canvas小demo-点击模块

{include file='../application/web/view/public/header.html'}
<link rel="stylesheet" href="\static\lib\swiper\4.5.0\css\swiper.min.css">
<script src="/static/lib/vue/vue.js"></script>

<!--<script src="/static/lib/swiper/4.5.0/js/swiper.min.js"></script>-->


<canvas id="canvas" style=" width:7.5rem;height:3rem;border-bottom:1px solid red;" width="750" height="300"   ></canvas>

</body>
<script src="/static/lib/jquery.cookie/1.4.1/jquery.cookie.js"></script>

<script>
    var data = new Vue({
        el: "#data",
        data: {
        }
    });

</script>
<script>

    sum =[];
    var shuliang = 21;
    var sl = 10;
    for(var i=0;i<shuliang;i++){
        if(sl > 100){
            sl == 100;
        }
        sum.push(
            {
                id:i,
                status:0,
                sum: sl,
                x: 0,
                y: 0,
                x1: 0,
                y1:0
            }
        );
        if(i < (shuliang/2-1)){
            sl +=10;
        }else{
            sl -=10;

        }
        if(sl < 10 ){
            sl = 10;
        }
    }
    //模拟第8根是过变色
    sum[7].status = 1;
    sum[12].status = 2;
    sum[10].status =3;
    function draw() {
        var cObj = document.getElementById("canvas");
        var ctx = cObj.getContext("2d");

        //    画布高度
        var hb = {height: 300, width: 750};
        //圆柱满高满宽度
        var yz = {height: 220, width: 24};
        //每一圆柱间隔
        var jiange = 10;
        //柱子上面预留
        var yuliu = 40;

        //比例 1-100
        var num = 60;
        var start = 25;
        var s = 0;
        ctx.clearRect(0,0,hb.width,hb.height);

        for (var i = 0; i < sum.length; i++) {
           //num = Math.ceil(Math.random() * 100);
            num = sum[i].sum;
            s = start + (i * (yz.width + jiange));
            //获取柱子高度
            var yy = (yz.height * (num / 100));

            var y = yz.height - yy + yuliu;
            sum[i].x = s;
            sum[i].y = y;

            sum[i].x1 =  yz.width;
            sum[i].y1 = yy;
            ctx.beginPath();
            ctx.strokeStyle = 'white';
            ctx.rect(s, y, yz.width, yy);
            //var grd = ctx.createLinearGradient(s, y, s + yz.width, y + yy);
            var grd = ctx.createLinearGradient(s, y+(yy/2), s + yz.width, (y + yy)-(yy/2));
//            ctx.moveTo(s,y-(yy/2));
//            ctx.lineTo( s + yz.width, (y + yy)-(yy/2));
//            ctx.stroke();
            if(sum[i].status == 1){

                grd.addColorStop(0, '#333333');
                grd.addColorStop(1, "#eeeeee");

            }else if(sum[i].status == 2){
                grd.addColorStop(0, '#f47e15');
                grd.addColorStop(1, "#f49847");
            }else if(sum[i].status == 3){
               grd.addColorStop(0.3, '#333333');
                //grd.addColorStop(0.3, '#272626');
                grd.addColorStop(1, "#f47e15");
            }else{
                grd.addColorStop(0, '#0080ff');
                grd.addColorStop(1, "#00baff");
            }
            ctx.fillStyle = grd;

            ctx.fill()
            ctx.stroke();

        }
    }
    draw();
    $('#canvas').mousemove(function(e){
        var cObj = document.getElementById("canvas");
        var ctx = cObj.getContext("2d");
        var x,y =0;
        //获取比例
        var bl = (750/ e.toElement.clientWidth);
        x = bl * e.offsetX;
        y = bl*e.offsetY;
        pot= {x:x,y:y};
        draw();
//        ctx.font="30px Arial";
//        ctx.fillText("Hello World",pot.x,pot.y);
        var x,y,x1,y1 = 0;
        for(var i in sum){
            x =sum[i].x;
            x1 = x +sum[i].x1;
            y =sum[i].y;
            y1 = y+sum[i].y1;

            if(pot.x >= x&&  x1 >= pot.x  && pot.y >= y && y1 >= pot.y){
                //alert('你点击了'+arr[i].id);
                ctx.fillStyle = 'red';
                ctx.font="30px Arial";
                ctx.fillText(sum[i].id,pot.x,pot.y);
            }
        }
    });
    $('#canvas').click(function(e){
        var cObj = document.getElementById("canvas");
        var ctx = cObj.getContext("2d");
        var x,y =0;
        //获取比例
        var bl = (750/ e.toElement.clientWidth);
        x = bl * e.offsetX;
        y = bl*e.offsetY;
        pot= {x:x,y:y};
        ctx.beginPath();
        ctx.arc(pot.x,pot.y,2,0,2*Math.PI);
        ctx.stroke();
        var x,y,x1,y1 = 0;
        for(var i in sum){
            x =sum[i].x;
            x1 = x +sum[i].x1;
            y =sum[i].y;
            y1 = y+sum[i].y1;

            if(pot.x >= x&&  x1 >= pot.x  && pot.y >= y && y1 >= pot.y){
               //alert('你点击了'+sum[i].id);

            }
        }
    })
</script>
{include file='../application/web/view/public/footer.html'}