关于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="http://www.w3school.com.cn/i/ct_html5_canvas_circle.gif";

     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>

补充：点击图片非中心移动时，会自动跳动到，图片以当前光标为中心

原链：https://blog.csdn.net/freedomVenly/article/details/79042536

HTML5 -canvas拖拽、移动 绘制图片可操作移动，拖动的更多相关文章

  1. 基于html5可拖拽图片循环滚动切换

    分享一款基于html5可拖拽图片循环滚动切换.这是一款支持手机端拖拽切换的网站图片循环滚动特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="s ...

  2. canvas拖拽效果

    canvas拖拽和平时用的js拖拽是有区别的 普通的js是设置目标为绝对定位,再根据鼠标的移动来改变left和top的值 canvas是获得了鼠标的位置,直接在目标点进行重新绘制 下面给一个简单的拖拽 ...

  3. canvas 拖拽实现

    Canvas 依赖分辨率 不支持事件处理器 弱的文本渲染能力 能够以 .png 或 .jpg 格式保存结果图像 最适合图像密集型的游戏,其中的许多对象会被频繁重绘 SVG 不依赖分辨率 支持事件处理器 ...

  4. 将HTML5 Canvas的内容保存为图片借助toDataURL实现

    将HTML5 Canvas的内容保存为图片主要思想是借助Canvas自己的API - toDataURL()来实现,具体实现如下,感兴趣的朋友可以参考下哈,希望对你有所帮助 <html> ...

  5. HTML5之拖拽(兼容IE和非IE)

    前世:项目中需要拖动div,然后和某个div进行位置交换,这不是关键,关键是还要保存位置,然后在下次打开的时候按照保存的位置显示.还好本人功力深厚,一下子就想到了用localStorage来保存,事实 ...

  6. html5 文件拖拽上传

    本文首先发表在  码蜂笔记 : http://coderbee.net/index.php/web/20130703/266 html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网 ...

  7. HTML5 Canvas 小例子 旋转的图片

    <一>CSS部分 @charset "utf-8"; *{ padding:; margin:; outline: none; } #canvas{ position: ...

  8. Ant Design -- 图片可拖拽效果，图片跟随鼠标移动

    Ant Design 图片可拖拽效果,图片跟随鼠标移动,需计算鼠标在图片中与图片左上角的X轴的距离和鼠标在图片中与图片左上角的Y轴的距离. constructor(props) { super(pro ...

  9. HTML5 Canvas（实战：绘制饼图2 Tooltip）

    继上一篇HTML5 Canvas(实战:绘制饼图)之后,笔者研究了一下如何给饼图加鼠标停留时显示的提示框. Plot对象 在开始Coding之前,笔者能够想到的最easy的方式,就是给饼图的每一个区域 ...

随机推荐

  1. Django---项目如何创建

    首先是安装好Django,找到 Scripts 目录配置环境变量: 只要添加到环境变量,在任何目录执行 django-admin startproject mysite 就可以创建 Django 程序 ...

  2. Linux命令记录----chkconfig命令

    chkconfig命令主要用来更新(启动或停止)和查询系统服务的运行级信息.谨记chkconfig不是立即自动禁止或激活一个服务,它只是简单的改变了符号连接. 使用语法:chkconfig [--ad ...

  3. js深浅copy

    ...点copy是浅拷贝var obj1 = [1,{a: 1}];//var obj2 = Object.assign( {}, obj1);//浅copy//var obj2 = JSON.par ...

  4. cURL 是一个功能强大的PHP库。

    使用PHP的cURL库可以简单和有效地去抓网页.你只需要运行一个脚本,然后分析一下你所抓取的网页,然后就可以以程序的方式得到你想要的数据了.无论是你想从从一个链接上取部分数据,或是取一个XML文件并把 ...

  5. ELK之Logstash使用useragent获取浏览器版本、型号以及系统版本

    参考文档:http://www.51niux.com/?id=216    https://www.cnblogs.com/Orgliny/p/5755384.html Logstash中的 logs ...

  6. 1.tTensorboard

    Windows下坑太多...... 在启动TensorBoard的过程,还是遇到了一些问题.接下来简单的总结一下我遇到的坑.        1.我没找不到log文件?!              答: ...

  7. HDU_6043_KazaQ's Socks

    KazaQ's Socks Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)T ...

  8. inaccessible

    $w = (object)array('key0'=>'a','key1'=>'b',0,1,2,0=>'0w',1=>'1w','11'=>'11str'); var_ ...

  9. ios -RunTi me(相关知识)

    一,推荐两片比较好的介绍RunTime的博文    1>runtime运行时官方文档翻译 2>runtime的学习总结 1.类和对象 2. 成员变量和属性 3.方法与消息 4.Method ...

  10. Python爬虫实例（六）多进程下载金庸网小说

    目标任务:使用多进程下载金庸网各个版本(旧版.修订版.新修版)的小说 代码如下: # -*- coding: utf-8 -*- import requests from lxml import et ...