canvas——动画实例_html-js-css

概述<!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

<!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>