canvas——动画实例 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>canvas</title>
  <style type="text/css">
    canvas {
      border: 1px solid red;
    }
  </style>
</head>
<body>
    <canvas id="myCanvas"  width="600px" height="400px">
      您的浏览器不支持canvas
    </canvas>
    <script  type="text/javascript">
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        var posx = 0, posy = 0, dir = 1, isMouseInRect = false;

        canvas.onmousemove = function(e){
            var mouseX = e.offsetX;
            var mouseY = e.offsetY;
            if(mouseX > posx && mouseY <posx +50 && mouseY > posy && mouseY < posy+ 50){
                isMouseInRect = true;
            }else{
                isMouseInRect = false;
            }
        }

        setInterval(function() {
            if(!isMouseInRect){
                posx += 10 * dir;
            }
            //clearRect清空画布的一个矩形区域
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillRect(posx, posy, 50, 50);
            if(posx + 50 >= canvas.width){
                dir = -1;
            }else if(posx <= 0){
                dir = 1;
            }
        },100);

    </script>
</body>
</html>

 

 

posted @ 2019-09-09 22:17  是桂  阅读(585)  评论(0)  编辑  收藏  举报