canvas 橡皮筋式线条绘图应用方法


Posted in HTML / CSS onFebruary 13, 2019

什么叫橡皮筋式

指画图时橡皮筋一样伸缩自如。。

例子如下:point_down:

canvas 橡皮筋式线条绘图应用方法

思路

思路很简单,只有橡皮筋式绘制功能要注意,以下总结mousedown,mousemove,mouseup三个阶段的思路

mousedown:记录start位置,drag(记录是否处于拖动状态)设置为true,getImageData( 橡皮筋效果关键1 )

mousemove:获取拖动时的位置pos,putImageData( 对应getImageData,橡皮筋效果关键2 ),根据pos与start画直线

mouseup:drag恢复为false

关键 就在于putImageData()与getImageData()这两个canvas的方法,putImageData()记录了鼠标点下时的图像,getImageData()对应还原。如果没有执行这两个方法就会出现以下的效果

canvas 橡皮筋式线条绘图应用方法

putImageData()相当于把“扫描”出来的线都擦掉

代码

<canvas id="canvas" width="600" height="400" style="border: 1px solid black;"> </canvas>
    <script type="text/javascript">
        let canvas = document.getElementById('canvas'),
            ctx = canvas.getContext('2d'),
            canvasLeft = canvas.getBoundingClientRect().left, //getBoundingClientRect()获取元素位置
            canvasTop = canvas.getBoundingClientRect().top;
        let imageData; //记录图像数据
        let start = new Map([['x',null],['y',null]]);
        let drag = false;//记录是否处于拖动状态
        canvas.onmousedown = function (e) {
            let pos = positionInCanvas(e, canvasLeft, canvasTop);
            start.set('x', pos.x);
            start.set('y', pos.y);
            drag = true;
            //记录imageData
            imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
        }
        canvas.onmousemove = function (e) {
            if(drag === true){
               let pos = positionInCanvas(e, canvasLeft, canvasTop);
               //相当于把扫描出来的线都擦掉,重新画
               ctx.putImageData(imageData, 0, 0);
               ctx.beginPath();
               ctx.moveTo(start.get('x'), start.get('y'));
               ctx.lineTo(pos.x, pos.y);
               ctx.stroke();
            }

        }
        canvas.onmouseup = function  (e) {
            drag = false;
        }
        function positionInCanvas (e, canvasLeft, canvasTop) {//获取canvas中鼠标点击位置
         return {
                  x:e.clientX - canvasLeft,
                  y:e.clientY - canvasTop
          }       
        }    

    </script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3之UI元素状态伪类选择器实例演示
Aug 11 HTML / CSS
CSS3弹性布局内容对齐(justify-content)属性使用详解
Jul 31 HTML / CSS
10 套华丽的CSS3 按钮小结
Oct 03 HTML / CSS
CSS3等相关属性制作分页导航实现代码
Dec 24 HTML / CSS
CSS3圆角边框和边界图片效果实例
Jul 01 HTML / CSS
CSS3模拟动画下拉菜单效果
Apr 12 HTML / CSS
html5 sessionStorage会话存储_动力节点Java学院整理
Jul 06 HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
Jun 21 HTML / CSS
微信浏览器取消缓存的方法
Mar 28 HTML / CSS
Canvas制作的下雨动画的示例
Mar 06 HTML / CSS
详解webapp页面滚动卡顿的解决办法
Dec 26 HTML / CSS
css3实现的加载动画效果
Apr 07 HTML / CSS
Canvas系列之滤镜效果
Feb 12 #HTML / CSS
canvas学习总结三之绘制路径-线段
Jan 31 #HTML / CSS
移动端Html5中百度地图的点击事件
Jan 31 #HTML / CSS
Html5页面内使用JSON动画的实现
Jan 29 #HTML / CSS
HTML5拍照和摄像机功能实战详解
Jan 24 #HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
Jan 24 #HTML / CSS
详解canvas绘制多张图的排列顺序问题
Jan 21 #HTML / CSS
You might like
GBK的页面输出JSON格式的php函数
2010/02/16 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
php+mysql实现的二级联动菜单效果详解
2016/05/10 PHP
php版交通银行网银支付接口开发入门教程
2016/09/26 PHP
JS的IE和Firefox兼容性集锦
2006/12/11 Javascript
帮助避免错误的Javascript陷阱清单
2009/05/31 Javascript
javascript 面向对象继承
2009/11/26 Javascript
基于jQuery实现表单提交验证
2014/11/24 Javascript
JavaScript将字符串转换为整数的方法
2015/04/14 Javascript
jQuery EasyUI 页面加载等待及页面等待层
2017/02/06 Javascript
jQuery实现碰到边缘反弹的动画效果
2018/02/24 jQuery
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
js中数组对象去重的两种方法
2019/01/18 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
python使用PyFetion来发送短信的例子
2014/04/22 Python
Python基类函数的重载与调用实例分析
2015/01/12 Python
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
python实现电子书翻页小程序
2019/07/23 Python
Python实现生成密码字典的方法示例
2019/09/02 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
python 实现控制鼠标键盘
2020/11/27 Python
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
SHEIN台湾:购买最新流行女装服饰
2019/05/18 全球购物
UNIX文件系统分类
2014/11/11 面试题
怎样有效的进行自我评价
2013/10/06 职场文书
2014年党员整改措施范文
2014/09/21 职场文书
群众路线查摆问题整改措施
2014/10/10 职场文书
机动车交通事故协议书
2015/01/29 职场文书
二十年同学聚会感言
2015/07/30 职场文书
HTML5中 rem适配方案与 viewport 适配问题详解
2021/04/27 HTML / CSS
Mysql存储过程、触发器、事件调度器使用入门指南
2022/01/22 MySQL
教你使用Ubuntu搭建DNS服务器
2022/09/23 Servers