涂鸦画板，监听touch事件，手机端

通过监听canvas上的touch事件，在canvas上作图

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><title>涂鸦画板</title><script src="http://code.jquery.com/jquery-1.11.1.min.js"></script><style>body{background-color: #EBEBEB;}canvas{background-color: #FFFFFF;}</style></head><body><h3 class="pos_abs txt">请在这里画图</h3><canvas id="myCanvas" width="400" height="200" class="pos_abs"></canvas><button id="sure-btn" class="pos_abs">确认</button><button id="reast-btn" class="pos_abs">重画</button><h3>图片显示在这里</h3><img src="" id="showImg"/><script>var canvas = document.getElementById("myCanvas");$(function(){$("#reast-btn").click(function(){clearArea();});$("#sure-btn").click(function(){if(isCanvasBlank(canvas)){alert("请在画布画图");return false;}var img = convertCanvasToImage(canvas);$("#showImg").attr("src",img);});canvas.addEventListener('touchstart', onTouchStart, false);canvas.addEventListener('touchmove', onTouchMove, false);})//是否支持触摸//上一次触摸坐标var lastX;var lastY;var ctx =canvas.getContext("2d");var _top = canvas.offsetTop;//画布的top值；var _left = canvas.offsetLeft;//画布的left值console.log(_top);ctx.lineWidth=10;//画笔粗细ctx.strokeStyle="#FF0000";//画笔颜色//触摸开始事件function onTouchStart(event) {event.preventDefault();lastX=event.touches[0].pageX;lastY=event.touches[0].pageY;drawRound(lastX-_left,lastY-_top);}//触摸滑动事件function onTouchMove(event) {try{event.preventDefault();drawLine(lastX-_left,lastY-_top,event.touches[0].pageX-_left,event.touches[0].pageY-_top);lastX=event.touches[0].pageX;lastY=event.touches[0].pageY;}catch(err){alert( err.description);}}//画圆function drawRound(x,y){ctx.fillStyle="#FF0000";ctx.beginPath();ctx.arc(x,y,5,0,Math.PI*2,true);ctx.closePath();ctx.fill();}//画线function drawLine(startX,startY,endX,endY){ctx.beginPath();ctx.lineCap="round";ctx.moveTo(startX,startY);ctx.lineTo(endX,endY);ctx.stroke();}//清除function clearArea() {// Use the identity matrix while clearing the canvas//  alert("")ctx.setTransform(1, 0, 0, 1, 0, 0);ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);}//生成图片function convertCanvasToImage(canvas) {var Pic = canvas.toDataURL("image/png");//  Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "");return Pic;}//判断画布内是否为空function isCanvasBlank(canvas) {var blank = document.createElement('canvas');blank.width = canvas.width;blank.height = canvas.height;return canvas.toDataURL() == blank.toDataURL();}</script></body>
</html>
复制代码

转载于:https://juejin.im/post/5ca1c3fbf265da307d448b5e

涂鸦画板，监听touch事件，手机端相关推荐

Fragment监听touch事件
1. 在MainActivity中添加方法 /** * 以下的几个方法用来,让fragment能够监听touch事件 */ private ArrayList<MyOnTouchListener ...
百度地图自定义覆盖物，在手机上无法监听click事件
百度地图自定义覆盖物,在手机上无法监听click事件最近在做手机web端集成百度地图遇到了个坑儿:手机端不支持自定义覆盖物的click事件: 1.自带的marker是支持的(marker不属于自定义 ...
【iOS-Cocos2d游戏开发之五】【1】多触点与触屏事件详解（单一监听、事件分发）...
本站文章均为李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/iphone-cocos2d/450.html ...
android listview ontouchlistener,Android ListView监听滑动事件的方法(详解)
ListView的主要有两种滑动事件监听方法,OnTouchListener和OnScrollListener 1.OnTouchListener OnTouchListener方法来自View中的监 ...
【iOS-Cocos2d游戏开发之五】多触点与触屏事件详解（单一监听、事件分发）
李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/iphone-cocos2d/450.html------- ...
js 监听安卓事件_百行代码实现js事件监听实现跨页面数据传输
百行代码实现js事件监听实现跨页面数据传输使用场景类似消息队列的使用场景,支持同页面和跨页面通信,发送消息和接收消息技术原理跨页面通信: 基于事件监听,通过监听 storage事件监听回调机制 ...
chromedp网络监听_动态爬虫三：监听网络事件 + 监听js事件
一: 概述上两篇文章介绍了cdp协议和chromedp库,从这篇文章开始动手实战一下,我们要拿到页面上更多的网络请求,最直接的想法就是类似于开发者工具里的network,只有一有网络请求就显示在列表 ...
Android事件的响应,Android 开发事件响应之基于监听的事件响应
Android 开发事件响应之基于监听的事件响应本文将介绍Android 操作系统如何通过监听来实现对事件的响应. Android 开发事件响应之基于监听的事件响应背景介绍 Android 开发事 ...
python监听鼠标事件_Python中使用PyHook监听鼠标和键盘事件实例
Python 中使用 PyHook 监听鼠标和键盘事件实例 PyHook 是一个基于 Python 的"钩子"库,主要用于监听当前电脑上鼠标和键盘的事件.这个库依赖于另一个 Py ...

涂鸦画板，监听touch事件，手机端

涂鸦画板，监听touch事件，手机端相关推荐

最新文章

热门文章