HTML JS的canvas小demo-点击模块添加动画效果

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

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

<div class="header" style="height:4.18rem;background: url('/static/mobile/images/weibo/t1.png');background-size: 100% 100%;">
    <div style="height:0.8rem;border-bottom:1px solid red;"></div>
    <canvas id="canvas" style=" width:7.5rem;height:1.7rem;border-bottom:1px solid red;" width="750" height="170"   ></canvas>

</div>


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

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

</script>
<script>
    //    画布高度
    var hb = {height: 180, width: 750};
    //圆柱满高满宽度
    var yz = {height: 170, width: 21};
    //每一圆柱间隔
    var jiange = 15;
    //柱子上面预留
    var yuliu = 10;
    //比例 1-100
    var num = 60;
    //动画每次画增长像素
    var sudu = 2;
    //定时器速度
    var inter_sudu = 1;





    var start = 25;
    var s = 0;
    sum =[];
    var shuliang = 20;
    var sl = 10;

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

        }
        if(sl < 10 ){
            sl = 20;
        }
    }
    //模拟第8根是过变色
    sum[7].status = 1;
    sum[12].status = 2;
    sum[10].status =3;

    var cObj = document.getElementById("canvas");
    var ctx = cObj.getContext("2d");


    function draw() {


        ctx.clearRect(0,0,hb.width,hb.height);
        for (var i = 0; i < sum.length; i++) {
          //num = Math.ceil(Math.random() * 100);
           //sum[i].sum = num;
           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 = 0;
            sum[i].beginY = y+yy;

        }
        //画
        stop_index =  setInterval(function(){draw2()},inter_sudu);
    }
    function draw2(){
        ctx.clearRect(0,0,hb.width,hb.height);
         var is_p = false;

            for(var i = 0; i < sum.length ; i++){
                ctx.beginPath();
                ctx.strokeStyle = 'white';
                var y2 = (yz.height * ( sum[i].sum / 100));
                //console.log(sum[i].beginY );
                if(sum[i].beginY > sum[i].y){
                    sum[i].beginY -= sudu;
                    sum[i].y1 = sum[i].y1+sudu;

                    is_p = true;
                }
                ctx.rect(sum[i].x, sum[i].beginY, sum[i].x1, sum[i].y1);
                //获取柱子高度
                var grd = ctx.createLinearGradient(sum[i].x,  sum[i].y    , sum[i].x + yz.width,   sum[i].y+yz.height );
                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, "#00baff");
                    grd.addColorStop(0.5, "#00baff");
                    grd.addColorStop(0.7, "#00baff");
                    grd.addColorStop(1, '#eeeeee');

                }
                ctx.fillStyle = grd;
                ctx.fill();
                ctx.stroke();

            }
            if(is_p == false){
                clearInterval(stop_index);
            }

    }
    draw()
    function flush(){
        ctx.clearRect(0,0,hb.width,hb.height);
        for(var i = 0; i < sum.length ; i++){
            ctx.beginPath();
            ctx.strokeStyle = 'white';
            var y2 = (yz.height * ( sum[i].sum / 100));

            ctx.rect(sum[i].x, sum[i].y, sum[i].x1, sum[i].y1);
            //获取柱子高度
            var grd = ctx.createLinearGradient(sum[i].x, sum[i].y+(y2/2), sum[i].x + yz.width, (sum[i].y + y2)-(y2/2));
            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();
            ctx.fillStyle = grd;
            ctx.fill();
            ctx.stroke();

        }
    }
   // draw();
    // setInterval(function(){    draw();},6);
    $('#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};
//        ctx.font="30px Arial";
//        ctx.fillText("Hello World",pot.x,pot.y);
        flush();
        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'}

最后

以上就是标致钻石为你收集整理的HTML JS的canvas小demo-点击模块添加动画效果的全部内容，希望文章能够帮你解决HTML JS的canvas小demo-点击模块添加动画效果所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。