如何将canvas实现描点功能改写为一个长尾词？

本文共计369个文字，预计阅读时间需要2分钟。

首先区分是PC端还是移动端，然后使用touchstart（或mousedown）、touchmove（或mousemove）和touchend（或mouseup）来处理触摸事件。在move事件中处理重复点击。代码如下：

javascriptfunction tapClip() { // 区分PC端还是移动端 var hastouch=ontouchstart in window ? touch : mouse;

// 处理触摸事件 var startEvent=hastouch + start; var moveEvent=hastouch + move; var endEvent=hastouch + end;

// 处理点击事件 var clickTimer=null; var clickTimeout=300; // 设置点击间隔时间

document.addEventListener(startEvent, function(e) { // 防止重复点击 if (clickTimer) { clearTimeout(clickTimer); } clickTimer=setTimeout(function() { // 点击事件处理逻辑 }, clickTimeout); });

document.addEventListener(moveEvent, function(e) { // 取消点击计时器 clearTimeout(clickTimer); });

document.addEventListener(endEvent, function(e) { // 执行点击事件 if (clickTimer) { clearTimeout(clickTimer); clickTimer=null; // 点击事件处理逻辑 } });}

先区分是PC端还是移动端，然后利用touchstart（mousedown）、touchmove（mousemove）和touchend（mouseup）来处理就可以了，重点在move那一块。

function tapClip(){ //区分PC还是手机 var hastouch = "ontouchstart" in window ? true:false, tapstart = hastouch ? "touchstart":"mousedown", tapmove = hastouch ? "touchmove":"mousemove", tapend = hastouch ? "touchend":"mouseup"; //笔触圆滑 ctx.lineCap = "round"; ctx.lineJoin = "round"; ctx.lineWidth = a; ctx.strokeStyle=colors; //touchstart或者mousedown canvas.addEventListener(tapstart , function(e){ e.preventDefault(); x1 = hastouch?e.targetTouches[0].pageX-canvas.offsetLeft:e.clientX-canvas.offsetLeft; y1 = hastouch?e.targetTouches[0].pageY-canvas.offsetTop:e.clientY-canvas.offsetTop; ctx.beginPath() ctx.moveTo(x1,y1); ctx.lineTo(x1+1,y1+1); //考虑到点击时能画出一个点 ctx.stroke(); //touchmove或者mousemove canvas.addEventListener(tapmove , tapmoveHandler); //touchend或者mouseup canvas.addEventListener(tapend , function(){ canvas.removeEventListener(tapmove , tapmoveHandler); }); //move时的处理函数 function tapmoveHandler(e){ e.preventDefault() x2 = hastouch?e.targetTouches[0].pageX-canvas.offsetLeft:e.clientX-canvas.offsetLeft; y2 = hastouch?e.targetTouches[0].pageY-canvas.offsetTop:e.clientY-canvas.offsetTop; ctx.moveTo(x1,y1); ctx.lineTo(x2,y2); ctx.stroke(); x1 = x2; y1 = y2; } }) }