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

本文介绍了一种使用HTML5 Canvas实现实时图片拖拽的方法。通过JavaScript监听鼠标事件,在画布上实现图片跟随鼠标移动的效果,并提供了完整的代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

关于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.youkuaiyun.com/freedomvenly/category_7397512.html

评论 17
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值