Canvas+鼠标事件

嘤嘤嘤，我还是个宝宝，好了，不扯，说正事！！！

吃了吗？

好了，真不扯了！！！

首先献上题目--------
Canvas+鼠标事件
我的效果是这样的：

当我打开页面的时候，人最初是消失的，
当我点击的时候，人才会出现在某一个特定的点，然后移动到点击的地方
那么问题就是…就是不够完美，它会随着我点击的速度然后行走得越来越快
因为我的代码是这样的，5是整数，除非我点的地方是整数，否则它会一直运动

var timer;
      function doMouseDown(event){
        clearInterval(event.timer);
        
        toXE = event.pageX - this.offsetLeft;
        toYE = event.pageY - this.offsetTop;
        
        event.timer = setInterval(function () {
            if(toXE>toX) toX+=5;
            else toX-=5;
            if(toYE>toY) toY=toY+5;
            else toY=toY-5;
            //setInterval(draw,100);
            draw();
            if(toX-toXE==0){
        clearInterval(event.timer);
            }

快是一个问题，它一直运动也是一个问题----------------------------------------

关于用鼠标控制上下左右，我的效果是这样的：
（刚开始打开页面，那个人也是没有显示的）
Canvas+鼠标事件

那么问题又来了：（莫名心肌梗塞–）
两个综合起来，要是我点击鼠标的话，没有点击到整数，人物就会一直动，
然后上下左右是控制不了的，因为它会一直执行那一段代码（上面那一段）

关于别人的说法/思路/建议：
1、搜索一下鼠标事件
获取到位置然后把这个图片定位到指定位置

2、这个你要有那个角色行走的每一帧图片
通过点击。获取当前坐标，计算原本坐标，得出xy值，
然后再通过c3效果，切换图片，就可以实现效果
c3的step，貌似这个东西，当然，你也可以用canvas

3、点击鼠标事件的时候让jpg（绝对定位）的left跟top等于鼠标点击浏览器所返回的水平坐标（x，y轴，js有一个事件属性client：鼠标指针获取当前浏览器的水平坐标

4、你这个作业考虑事件碰撞不，就是说人走到桌子那里的时候，会不会走不过去，然后会转到周围来。还是说你只是想只是当初控制人物行走。。。

5、这个就是监听鼠标点击事件，获取点击的坐标点，然后改变人物的坐标
难点应该在角色的坐标到点击的坐标的路线，那应该不会要求实现按路线移动，毕竟涉及到了寻径算法了，知道一种能解决的就行，最基本的，就是鼠标点击事件event里有clientX和clientY属性，和角色的坐标做对比

6、粗暴一点方法就是，你不一定完全用canvas绘制。
直接用div当作父元素，用上那个房间当作背景。
然后人物当作这个div的子元素，之后子元素相对于房间定位。就是left，top一类，当然你用transform也行
用一个数组记录人物之前的位置，再用一个数组记录鼠标点击的位置。
然后相减来根据正负值来判断移动的方向。

当然，canvas绘制的话也是这样的道路，只是canvas性能更高，但是大体移动方向，都是通过人物的位置的坐标，与鼠标位置的桌边相减。根据正负值来判断情况。

关于控制上下左右的代码：

 document.function(ev){
        var oEvent=ev||event;
        var myCanvas=document.getElementById('myCanvas');
    if(oEvent.keyCode==37)
    {
        //yCanvas.style.left=myCanvas.offsetLeft-10+'px';
        toX=toX-5;
        //toY--;
        draw();
    }
    else if(oEvent.keyCode==39)
    {
        //myCanvas.style.left=myCanvas.offsetLeft+10+'px';
        toX=toX+5;
        //toY--;
        draw();
    }

    if(oEvent.keyCode==38)
    {
        //yCanvas.style.left=myCanvas.offsetLeft-10+'px';
        toY=toY-5;
        //toY--;
        draw();
    }
    else if(oEvent.keyCode==40)
    {
        //myCanvas.style.left=myCanvas.offsetLeft+10+'px';
        toY=toY+5;
        //toY--;
        draw();
    }

个人小声哔哔一下：
关于另一部分的代码，其实老师说可以用运动框架及鼠标事件来实现
但是上个学期学了canvas，所以我用了canvas--------------------------
其实办法很多，关键是我都不会！！！！！！