炉石传说：Canvas绘制出的图像能很好的美化。

我希望能够单击，拖放Canvas绘制的图像，因为Canvas绘制的图像可以非常美化。看来我想玩炉石传说游戏，但我也没有玩。

以我的理解，画布就像在画布上绘制图像。它只能看到但不能“触摸”它。你是怎么做到的。我不知道如何在Internet上进行操作，在这里我做了一个演示，并带着自己的想法与您分享。

思考：

尽管Canvas不能被拖动，但是div可以被拖动，那么如何将两者结合起来呢？最初的想法是覆盖一个与Canvas图像大小相同的div。拖动div时，将校正获得的光标坐标，并将其传递到Canvas绘图函数以刷新图像的位置。

既然您想介绍一下，请先做一些准备工作：

1.将div和Canvas画布设置为位置：绝对，否则它们不能重叠。

2.将div的z-index值设置为较大的值，以确保它在“画布”屏幕上。

准备工作完成后，让我们首先看一下div的拖放：

    var divObj=document.getElementById("cover");
    var moveFlag=false;
        divObj.οnmοusedοwn=function(e){
        moveFlag=true;
        var clickEvent=window.event||e;
        var mwidth=clickEvent.clientX-divObj.offsetLeft;
        var mheight=clickEvent.clientY-divObj.offsetTop;
        document.οnmοusemοve=function(e){
            var moveEvent=window.event||e;
            if(moveFlag){
                divObj.style.left=moveEvent.clientX-mwidth+"px";
                divObj.style.top=moveEvent.clientY-mheight+"px";
                divObj.οnmοuseup=function(){
                    moveFlag=false;
                }
            }
        }
    };

让我们解释一下这段代码：首先获取div对象，设置拖动标记moveFlage，当onmousedown为true时，它可以拖动；当onmouseup为false时，它不能拖动。

      var clickEvent=window.event||e;
      var mwidth=clickEvent.clientX-divObj.offsetLeft;
      var mheight=clickEvent.clientY-divObj.offsetTop;

这三行代码用于校正光标位置。单击后，将光标记录在div上。 mwidth和mheight表示光标相对于div的左侧和顶部的距离。未经更正：

这是未经校正的结果。单击光标时，div的坐标（即左上角）将与光标的坐标一致。

更正后：

单击时，光标将始终“停留”在div中的某个点。

接下来绘制图片：

首先定义全局变量X和Y，它们用于实时更新图像的绘制坐标。

 var ctx=document.getElementById("myCanvas").getContext("2d");
 var img=document.getElementById("myImg");
    function drawImg(){
        ctx.clearRect(0,0,1000,500);
        ctx.beginPath();
        ctx.drawImage(img,X,Y);
        ctx.closePath();
        ctx.stroke();
    }
    window.οnlοad=function(){
        setInterval(drawImg,1);
    }

获取“画笔”，获取图片对象。在这里，setInterval执行循环绘制图片的功能以刷新图片的位置。 setInterval的间隔值越小，拖动越平滑。

同时，不要忘了clearRect，当图片移动到下一个位置时，请清除上一个位置的图片。这些参数是“画布”画布的坐标和大小。

拖动时将校正后的光标坐标传输到X和Y：

 X=moveEvent.clientX-mwidth;
 Y=moveEvent.clientY-mheight;

最后，添加div和图像范围：

if(moveEvent.clientX<=mwidth){
        divObj.style.left=0+"px";
        X=0;
}
if(parseInt(divObj.style.left)+divObj.offsetWidth >=1000){
        divObj.style.left=1000 - divObj.offsetWidth+"px";
        X=1000 - divObj.offsetWidth;
}
if(moveEvent.clientY<=mheight){
        divObj.style.top=0+"px";
        Y=0;
}
if(parseInt(divObj.style.top)+divObj.offsetHeight>=500){
       divObj.style.top=500-divObj.offsetHeight+"px";
       Y=500-divObj.offsetHeight;
}

这取决于个人要求。请注意，必须同时限制div和image的活动范围。 1000和500是此示例的画布大小，如果在整个页面中都处于活动状态，则将其更改为innerWidth或innerHeight。

完全隐藏div以查看效果：

最后，让我们谈谈点击事件。这里应注意，onmousedown和onmouseup构成了拖动过程中的单击过程，但是我们不希望在拖动结束后触发click事件。

这是一种相对简单的方法，将clickFlag定义为默认值，在onmousedown时将其设置为true，在执行onmousemove事件时将其设置为false。

clickFlag的值是在上一次onmouseup时判断的，并且只有在true时才触发click事件。也就是说，当您按下鼠标时，只有在您没有注意到移动并释放鼠标的情况下才会触发click事件。

完成JS代码后：

//    绘制图片坐标
    var X=0;
    var Y=0;
//    js部分
    var divObj=document.getElementById("cover");
    var moveFlag=false;
//区别moueseup与click的标志
    var clickFlag=false;
//    拖拽函数
    divObj.οnmοusedοwn=function(e){
        moveFlag=true;
        clickFlag=true;
        var clickEvent=window.event||e;
        var mwidth=clickEvent.clientX-divObj.offsetLeft;
        var mheight=clickEvent.clientY-divObj.offsetTop;
        document.οnmοusemοve=function(e){
            clickFlag=false;
            var moveEvent=window.event||e;
            if(moveFlag){
                divObj.style.left=moveEvent.clientX-mwidth+"px";
                divObj.style.top=moveEvent.clientY-mheight+"px";
              将鼠标坐标传给Canvas中的图像
                X=moveEvent.clientX-mwidth;
                Y=moveEvent.clientY-mheight;
              下面四个条件为限制div以及图像的活动边界
                if(moveEvent.clientX<=mwidth){
                    divObj.style.left=0+"px";
                    X=0;
                }
                if(parseInt(divObj.style.left)+divObj.offsetWidth >=1000){
                    divObj.style.left=1000 - divObj.offsetWidth+"px";
                    X=1000 - divObj.offsetWidth;
                }
                if(moveEvent.clientY<=mheight){
                    divObj.style.top=0+"px";
                    Y=0;
                }
                if(parseInt(divObj.style.top)+divObj.offsetHeight>=500){
                    divObj.style.top=500-divObj.offsetHeight+"px";
                    Y=500-divObj.offsetHeight;
                }
                divObj.οnmοuseup=function(){
                    moveFlag=false;
                    if(clickFlag){
                        alert("点击生效");
                    }
                }
            }
        }
    };

这是本示例的结尾。如果您有兴趣，可以自己开发更。感谢您的浏览，也感谢所有给了我作为菜鸟的意见的人。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-376810-1.html