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动画的回调处理
Jul 21 HTML / CSS
纯CSS3实现的井字棋游戏
Nov 25 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
Jul 16 HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
Dec 13 HTML / CSS
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
Jan 31 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
Oct 26 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
Jan 29 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 HTML / CSS
HTML5 图片悬停放大的实现代码示例
Dec 04 HTML / CSS
html5用video标签流式加载的实现
May 20 HTML / CSS
在html页面中取得session中的值的方法
Aug 11 HTML / CSS
AmazeUI 按钮交互的实现示例
Aug 24 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
用PHP函数解决SQL injection
2006/12/09 PHP
PHP获得用户使用的代理服务器ip即真实ip
2006/12/31 PHP
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
PHP 5.6.11中CURL模块问题的解决方法
2016/08/08 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
PHP实现动态添加XML中数据的方法
2018/03/30 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
iview中Select 选择器多选校验方法
2018/03/15 Javascript
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
如何把vuejs打包出来的文件整合到springboot里
2018/07/26 Javascript
Vue项目数据动态过滤实践及实现思路
2018/09/11 Javascript
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
python中List的sort方法指南
2014/09/01 Python
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
python中format()函数的简单使用教程
2018/03/14 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
python 3.7.0 安装配置方法图文教程
2018/08/27 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
Python操作Jira库常用方法解析
2020/04/10 Python
python实现批量转换图片为黑白
2020/06/16 Python
详解KMP算法以及python如何实现
2020/09/18 Python
Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
2021/01/29 Python
HTML5中canvas中的beginPath()和closePath()的重要性
2018/08/24 HTML / CSS
英国潮流网站:END.(全球免邮)
2017/01/16 全球购物
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
捷克钓鱼用品网上商店:Parys.cz
2018/06/15 全球购物
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
关于上班时间调整的通知
2015/04/23 职场文书
北京青年观后感
2015/06/15 职场文书
教你怎么用Python实现GIF动图的提取及合成
2021/06/15 Python