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

最新推荐文章于 2024-05-10 21:17:55 发布

freedom_文

最新推荐文章于 2024-05-10 21:17:55 发布

阅读量4w

点赞数 6

分类专栏： canvas 文章标签： canvas html5 绘图

本文链接：https://blog.csdn.net/freedomVenly/article/details/79042536

版权

canvas 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

关于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.png";

    img.onload=function () {
        cansText.drawImage(img,50,50);   //在画布X轴 50  Y轴坐标50 处添加一张图片
    };

    //在事件外声明需要用到的变量
    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>

效果图：##

做成动态图目测有点阴影，实际页面是没有的哦！

在这里插入图片描述

DEMO下载： https://github.com/vvenly/canvasDemo.git

关于图片及 canvas 可参考： https://blog.csdn.net/freedomvenly/category_7397512.html

freedom_文

关注

6
点赞
踩
37

收藏

觉得还不错? 一键收藏
17
评论
HTML5 -canvas拖拽、移动绘制图片可操作移动，拖动

关于canvas 的基础知识就不多说了，可以进这个网址学习http://www.w3school.com.cn/html5/html_5_canvas.asp对于canvas 和 SVG 其实一开始个人是比较倾向于SVG多一点，不过后来工作需要，又学习了下canvas, 这两个之间主要不同是 canvas是在JavaScript中绘制，SVG则是在 XML 绘制其实canvas 主
复制链接

扫一扫