canvas应用

朴灿烈づ我的快乐病毒、 2022-03-10 07:20 78阅读 0赞

<head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
          .btn{
              position:absolute;
          }
            .btn button{
                border-radius:50%;
                padding:5px;
            }
        </style>
    </head>
    <body>
    
    <div class="btn">
        <button class="btnA">暂停</button>
        <button class="btnB">继续</button>
        <button class="btnC">重播</button>
    </div>
    <canvas id="myCanvas" width="500px" height="500px"></canvas>
    <script>
        var btnA = document.getElementsByClassName('btnA')[0];
        var btnB = document.getElementsByClassName('btnB')[0];
        var btnC = document.getElementsByClassName("btnC")[0];
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext('2d');
        var setInterLine;
        var w = canvas.width;
        var h= canvas.height;
        //继续键按钮
        btnA.onclick=function(){
            clearInterval(setInterLine);
        };
        //暂停键按钮
        btnB.onclick=function(){
            play();
        };
        //重播键按钮
        btnC.onclick=function(){
            ctx.clearRect(0,0,w,h);
            ctx.beginPath();
            ctx.strokeStyle='#' + (Math.random()*30 * 0xfffffff<<0).toString(16);//任意的取线条颜色
            play();
        };
        //定时器函数
        function setInter(lineName){
            setInterLine = setInterval(lineName, 10);
        }
        //左边斜线条
        function drawLeftLine(startX,startY,X,Y) {
            function leftLine() {
                if (startX>X && startY<Y) {
                    ctx.moveTo(startX, startY);
                    ctx.lineTo(--startX, ++startY);
                    ctx.stroke();
                } else {
                }
            }
            setInter(leftLine);
        }
        //底部斜线条
        function drawBottomLine(startX,startY,X,Y){
           function bottomLine(){
               if (startX<X && startY<Y) {
                   ctx.moveTo(startX, startY);
                   ctx.lineTo(++startX, ++startY);
                   ctx.stroke();
               } else {
               }
           }
            setInter(bottomLine);
        }
        //右边斜线条
       function drawRightLine(startX,startY,X,Y) {
            function rightLine(){
                if (startX<X && startY>Y) {
                    ctx.moveTo(startX, startY);
                    ctx.lineTo(++startX, --startY);
                    ctx.stroke();
                } else {
                }
            }
           setInter(rightLine);
       }
       //顶部斜线条
        function drawTopLine(startX,startY,X,Y) {
            function topLine() {
                if (startX>X && startY>Y) {
                    ctx.moveTo(startX, startY);
                    ctx.lineTo(--startX, --startY);
                    ctx.stroke();
                } else {
                }
            }
            setInter(topLine);
        }
        //线条播放函数
       function play(){
           drawLeftLine(250,10,9,251);
           setTimeout(function(){
               drawBottomLine(10,250,256,491);
           },2500);
           setTimeout(function(){
               drawRightLine(250,490,491,250);
           },5000);
           setTimeout(function(){
               drawTopLine(490,250,249,9);
           },7000);
       }
    </script>
    </body>