Canvas绘图--放缩

港控/mmm° 2022-05-28 12:20 285阅读 0赞

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style> body{ text-align: center; } canvas{ background: #eee; border: 1px solid #000; } </style>
    </head>
    <body>
        <canvas width="500" height="500" id="c1"></canvas>
        <script> var c1=document.getElementById("c1") var ctx=c1.getContext("2d"); //利用定时器调用number方法，画圆 setInterval(function(){ ctx.clearRect(0,0,500,500); num1(); num2(); num3(); num4(); num5(); num6(); num7(); num8(); },100) // 1.动态画左边三个小圆点，用x的值判断来控制他们的xDirect // 这里用到了闭包保存orientX,orientY.隔离彼此小圆之间的干扰 function moveDot1(x,y,xDirect,yDirect,min,max){ var orientX=xDirect; var orientY=yDirect; return function(){ drawDot(x,y); x+=10*orientX; y+=10*orientY; if(x<=min){ orientX=xDirect; orientY=yDirect; } if(x>=max){ orientX=-xDirect; orientY=-yDirect; } } } // 2.动态画中间上面的个小圆点，用y的值判断来控制他们的yDirect function moveDot2(x,y,yDirect,min,max){ var orientY=yDirect return function(){ drawDot(x,y); y+=10*orientY; if(y<=min){ orientY=yDirect; } if(y>=max){ orientY=-yDirect; } } } // 2.动态画中间下面的个小圆点，用y的值判断来控制他们的yDirect function moveDot3(x,y,yDirect,min,max){ var orientY=yDirect; return function(){ drawDot(x,y); y+=10*orientY; if(y<=min){ orientY=-yDirect; } if(y>=max){ orientY=yDirect; } } } // 3.动态画右边三个小圆点，用x的值判断来控制他们的xDirect function moveDot4(x,y,xDirect,yDirect,min,max){ var orientX=xDirect; var orientY=yDirect; return function(){ drawDot(x,y); x+=10*orientX; y+=10*orientY; if(x<=min){ orientX=-xDirect; orientY=-yDirect; } if(x>=max){ orientX=xDirect; orientY=yDirect; } } } var num1=moveDot1(10,10,1,1,10,250); var num2=moveDot1(10,250,1,0,10,250); var num3=moveDot1(10,490,1,-1,10,250); var num4=moveDot2(250,10,1,10,250); var num5=moveDot3(250,490,-1,250,490); var num6=moveDot4(490,10,-1,1,250,490); var num7=moveDot4(490,250,-1,0,250,490); var num8=moveDot4(490,490,-1,-1,250,490); // 静止画小圆点 function drawDot(x,y){ ctx.beginPath(); ctx.arc(x,y,10,0,2*Math.PI); ctx.fillStyle="#0f0"; ctx.fill(); } </script>
    </body>
    </html>