HTML5 -canvas拖拽、移动绘制图片可操作移动，拖动

关于canvas 的基础知识就不多说了，可以进这个网址学习

http://www.w3school.com.cn/html5/html_5_canvas.asp

对于canvas 和 SVG 其实一开始个人是比较倾向于SVG多一点，不过后来工作需要，又学习了下canvas,
这两个之间主要不同是 canvas是在JavaScript中绘制，SVG则是在 XML 绘制

其实canvas 主要的工作就是绘制图像，图表之类的工作，对于一些可操作的特效个人还是更喜欢用canvas + div 来实现；
如果不是特别难的需求能做到尽量做<(￣︶￣)↗[GO!]

列出一个demo 这个主要功能就是canvas 内图片拖拽
（想要拖拽什么可以直接更换JavaScript 中第3、4、5句）；

说是拖拽，但也只是目测看起是 “像”是，其实在每次鼠标移动的时候都会先清掉之前画好的，再在鼠标所在的位置重新绘制一个，全套demo如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body,div{
            margin:0;
            padding:0;
        }
        #d1{
            width:500px;
            height: 400px;
            border: 2px solid #00FFD1;
        }
    </style>
</head>
<body>


<div id="d1">
    <canvas id="myCanvas" width="500" height="400">
        <p>您的系统不支持此程序!</p>
    </canvas>
</div>

<script>
    const canva=document.getElementById("myCanvas");
    const cansText=canva.getContext("2d");

    let img = new Image();
    img.src="cat.jpg";
    cansText.drawImage(img,50,50,150,100);
    //在事件外声明需要用到的变量
    let ax,ay,x,y;

    canva.onmousedown=function (e) {

        canva.onmousemove = function(e){
             x= e.clientX;y=e.clientY;

            //限制移动不能超出画布
            (x<173)? ax=75 : ax=425;
            (y<148)? ay=50 : ay=350;

            (x < 425 && x >75)? x =e.clientX : x =ax;

            (y > 50 && y <350) ? y=e.clientY : y=ay;

            //先清除之前的然后重新绘制
            cansText.clearRect(0,0,canva.width,canva.height);

            cansText.drawImage(img,x-75,y-50,150,100);
        };

        canva.onmouseup = function(){
            canva.onmousemove = null;
            canva.onmouseup = null;
        };
    }

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

效果图：

这里写图片描述

HTML5 -canvas拖拽、移动 绘制图片可操作移动，拖动

关于canvas 的基础知识就不多说了，可以进这个网址学习

效果图：

猜你喜欢

HTML5 -canvas拖拽、移动绘制图片可操作移动，拖动