关于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. 上拉刷新和下拉刷新的两种方法（包括使用第三方库MJRefresh）

    一.使用苹果原生的方法 1.下拉刷新 2.上拉刷新 (1 首先要新建一个footer得XIB文件,当然同时包括对应的控制器文件,例如在XIB文件中可以如下拖拉对应的控件 (2 然后在代码文件中写一个实 ...

  2. linux下配置Java_web环境

    I安装JDK 1下载jdk*.bin/jdk*.rpm文件 2把安装包copy到安装目录 cp jdk*.bin /www/java 3安装JDK 如果是.bin文件,直接在复制的当前目录执行即可 . ...

  3. PAT-GPLT L1-033 - 出生年 - [简单模拟]

    题目链接:https://www.patest.cn/contests/gplt/L1-033 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standar ...

  4. 2018/04/18 每日一学Linux 之 ssh关闭密码登录

    在平常工作中,常常需要关闭 SSH 的密码登录,只留 SSH 证书登录. 好处显而易见,避免了经常输入密码导致的密码泄露,和设置密码导致被暴力破解的可能性. -- 方法也很简单,首先 你是可以 登录 ...

  5. web window pixel等笔记

    原文:http://www.w3cplus.com/css/viewports.html 屏幕尺寸 Screen size =显示器尺寸 screen.width 和 screen.height.这两 ...

  6. Redis添加历史浏览记录

    参考资料 http://redisdoc.com/index.html http://redis-py.readthedocs.io/en/latest/#indices-and-tables 1.什 ...

  7. 问题：bower git is not installed or not in the path

    用bower install jquery安装jquery,bower提示错误bower git is not installed or not in the path. 根据错误信息的知道出现错误两 ...

  8. Core Data with Mantle

    Mantle makes it easy to write a simple model layer for your Cocoa or Cocoa Touch application.  Mantl ...

  9. [vue]vue条件渲染v-if(template)和自定义指令directives

    条件渲染: v-if/template <div id="app"> <h1>v-show: display: none</h1> <di ...

  10. hdu3339In Action(最短路+01背包）

    http://acm.sdut.edu.cn:8080/vjudge/contest/view.action?cid=259#problem/H Description Since 1945, whe ...