使用触摸屏设备在画布上绘图

我一直在做一些搜索，看看是否可以让触摸屏用户通过原始JavaScript在画布标签上绘制。到目前为止，我没有太多的运气，最终又回到了一个无法与之互动的画布。我有一个div内的画布。有关我如何完成此任务的任何建议？我试过一些教程，他们似乎只适用于桌面设备和点击事件，而不是当用户在画布上移动手指时。使用触摸屏设备在画布上绘图

来源

2016-08-20 userrandomuser

<html> 
 
<head> 
 
<title>Sketchpad</title> 
 

 
<script type="text/javascript"> 
 
    // Variables for referencing the canvas and 2dcanvas context 
 
    var canvas,ctx; 
 

 
    // Variables to keep track of the mouse position and left-button status 
 
    var mouseX,mouseY,mouseDown=0; 
 

 
    // Draws a dot at a specific position on the supplied canvas name 
 
    // Parameters are: A canvas context, the x position, the y position, the size of the dot 
 
    function drawDot(ctx,x,y,size) { 
 
     // Let's use black by setting RGB values to 0, and 255 alpha (completely opaque) 
 
     r=0; g=0; b=0; a=255; 
 

 
     // Select a fill style 
 
     ctx.fillStyle = "rgba("+r+","+g+","+b+","+(a/255)+")"; 
 

 
     // Draw a filled circle 
 
     ctx.beginPath(); 
 
     ctx.arc(x, y, size, 0, Math.PI*2, true); 
 
     ctx.closePath(); 
 
     ctx.fill(); 
 
    } 
 

 
    // Clear the canvas context using the canvas width and height 
 
    function clearCanvas(canvas,ctx) { 
 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    } 
 

 
    // Keep track of the mouse button being pressed and draw a dot at current location 
 
    function sketchpad_mouseDown() { 
 
     mouseDown=1; 
 
     drawDot(ctx,mouseX,mouseY,12); 
 
    } 
 

 
    // Keep track of the mouse button being released 
 
    function sketchpad_mouseUp() { 
 
     mouseDown=0; 
 
    } 
 

 
    // Keep track of the mouse position and draw a dot if mouse button is currently pressed 
 
    function sketchpad_mouseMove(e) { 
 
     // Update the mouse co-ordinates when moved 
 
     getMousePos(e); 
 

 
     // Draw a dot if the mouse button is currently being pressed 
 
     if (mouseDown==1) { 
 
      drawDot(ctx,mouseX,mouseY,12); 
 
     } 
 
    } 
 

 
    // Get the current mouse position relative to the top-left of the canvas 
 
    function getMousePos(e) { 
 
     if (!e) 
 
      var e = event; 
 

 
     if (e.offsetX) { 
 
      mouseX = e.offsetX; 
 
      mouseY = e.offsetY; 
 
     } 
 
     else if (e.layerX) { 
 
      mouseX = e.layerX; 
 
      mouseY = e.layerY; 
 
     } 
 
    } 
 

 

 
    // Set-up the canvas and add our event handlers after the page has loaded 
 
    function init() { 
 
     // Get the specific canvas element from the HTML document 
 
     canvas = document.getElementById('sketchpad'); 
 

 
     // If the browser supports the canvas tag, get the 2d drawing context for this canvas 
 
     if (canvas.getContext) 
 
      ctx = canvas.getContext('2d'); 
 

 
     // Check that we have a valid context to draw on/with before adding event handlers 
 
     if (ctx) { 
 
      canvas.addEventListener('mousedown', sketchpad_mouseDown, false); 
 
      canvas.addEventListener('mousemove', sketchpad_mouseMove, false); 
 
      window.addEventListener('mouseup', sketchpad_mouseUp, false); 
 
     } 
 
    } 
 
</script> 
 

 
<style> 
 
/* Some CSS styling */ 
 
#sketchpadapp { 
 
    /* Prevent nearby text being highlighted when accidentally dragging mouse outside confines of the canvas */ 
 
    -webkit-touch-callout: none; 
 
    -webkit-user-select: none; 
 
    -khtml-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 

 

 
#sketchpad { 
 
    float:left; 
 
    border:2px solid #888; 
 
    border-radius:4px; 
 
    position:relative; /* Necessary for correct mouse co-ords in Firefox */ 
 
} 
 
</style> 
 
</head> 
 

 
<body onload="init()"> 
 
    <div id="sketchpadapp"> 
 
     <div class="leftside1"> 
 
       
 

 
      <input type="submit" value="Clear Sketchpad" onclick="clearCanvas(canvas,ctx);"> 
 
     </div> 
 
     <div class="rightside"> 
 
      <canvas id="sketchpad" height="300" width="400"> 
 
      </canvas> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

来源

2016-08-20 04:32:19

这是伟大的！起初它在触摸屏上不能很好地工作，但我用touchmove替换了EventListener，而且这似乎已经成功了。无论如何，我会继续玩弄它来解决它。谢谢。 – userrandomuser

使用触摸屏设备在画布上绘图

回答

相关问题