为什么鼠标移上去不会停止

为什么鼠标移上去不会停止


<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>canvas动画</title>

    <style>

        canvas{background-color:lightblue;}

    </style>

</head>

<body>

    <canvas width="800px" height="800px" id="canvas">您的浏览器不支持canvas</canvas>

    <script>

        var canvas=document.getElementById("canvas");

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

        var parX=30

         parY=0

         zk=1

         ismove=false;

        canvas.onmousemove=function(e){

         var moveX=e.offsetX;

         var moveY=e.offsetY;

         if(moveX>parX && moveX<parX+50 && moveY>parY && moveY<parY+50 ){

         ismove=true;

         }else{

         ismove=false;

         }

        }


        setInterval(function(){

         parY=parY+10*zk;

         ctx.clearRect(0,0,canvas.width,canvas.height);

         ctx.fillStyle='green';

         ctx.fillRect(parX,parY,50,50);

         if(parY+50>=canvas.height){

         zk=-1;

         }else if(parY<=0){

         zk=1;

         }

        },100)

    </script>

</body>

</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕星星 2018-10-31 15:21:11

动画效果实现的是可以的,如果在鼠标的onmousemove事件中判断停止条件,清除定时器就可以了,如下:

http://img1.sycdn.imooc.com//climg/5bd957c50001c12b11470513.jpg

实现这种效果就可以了。

自己可以测试下,祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
组件化思想开发电商网页 18版
  • 参与学习           人
  • 提交作业       467    份
  • 解答问题       4826    个

本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识,不仅如此,还会学习如何利用组件化的思想来开发网页,知识点+案例,使得所学可以更好的得到实践。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师