用触摸HTML画布绘制仅绘制点

Question

Recently I have been working with responsive design and I decided I would make a page with some quotes and a place where you can then sign your name. 最近，我一直在进行响应式设计，因此我决定在页面上加一些引号，然后在该位置上签名。 The place where you can sign uses mouse and touch events to draw on canvas. 您可以签名的地方使用鼠标和触摸事件在画布上绘制。 It works perfectly with a mouse but with touch when I try to drag and draw it just highlights box but I can draw one dot at a time by tapping but I want it to drag normally like with the mouse. 它可以完美地与鼠标配合使用，但是当我尝试拖动并绘制它时，只需触摸加亮框即可，但是我可以通过点击一次绘制一个点，但我希望它像鼠标一样正常拖动。 I have set default off for things however I still cannot fix this issue. 我已将默认设置为“关闭”，但是仍然无法解决此问题。 I don't know if it has something to do with the canvas being highlighted with touch. 我不知道是否与触摸突出显示的画布有关。 Here is the individual code for the touch not in my site but in a canvas webpage by itself: 以下是触摸的单独代码，它们不在我的网站上，而是在画布网页上：

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

<script type="text/javascript">
var canvas;
var ctx;
var mouseX;
var mouseY;
var mouseDown=0;
var touchX,touchY;
function drawCircle(ctx,x,y,size) {
    r=0; g=0; b=0; a=255;//opaque
    ctx.fillStyle = "rgba("+r+","+g+","+b+","+(a/255)+")";
    ctx.beginPath();
    ctx.arc(x, y, size, 0, Math.PI*2, true); 
    ctx.closePath();
    ctx.fill();
} 
function clearCanvas(canvas,ctx) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}
    //get mouse position
function getMousePosition(moves) {
    if (!moves)
        var moves = event;

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

function canvases_touchStart() {
    getTouchPosition();

    drawCircle(ctx,touchX,touchY,4);

    //prevents another mousedown
    event.preventDefault();
}

//draw and prevent default scrolling with touch
function canvase_touchMove(moves) { 
    getTouchPosition(moves);

    drawCircle(ctx,touchX,touchY,4); 

    //prevent scrolling
    event.preventDefault();
}


function getTouchPosition(moves) {
    if (!moves)
        var moves = event;

    if(moves.touches) {
        if (moves.touches.length == 1) { //one finger
            var touch = moves.touches[0]; //get info for finger
            touchX=touch.pageX-touch.target.offsetLeft;
            touchY=touch.pageY-touch.target.offsetTop;
        }
    }
}
function canvase_mouseDown() {
    mouseDown=1;
    drawCircle(ctx,mouseX,mouseY,4);
}
function canvase_mouseUp() {
    mouseDown=0;
}
function canvase_mouseMove(moves) { 
    getMousePosition(moves);
    if (mouseDown==1) {
        drawCircle(ctx,mouseX,mouseY,4);
    }
}



function init() {

    canvas = document.getElementById('canvase');

    if (canvas.getContext)
        ctx = canvas.getContext('2d');

    //check for ctx first 
    if (ctx) {
        canvas.addEventListener('mousedown', canvase_mouseDown, false);
        canvas.addEventListener('mousemove', canvase_mouseMove, false);
        window.addEventListener('mouseup', canvase_mouseUp, false);
        canvas.addEventListener('touchstart', canvase_touchStart,    false);
        canvas.addEventListener('touchmove', canvase_touchMove, false);
    }
}
</script>

<style>
#whole {
/*prevents highlighting text*/
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#instructions {
width:30%;
height:15%;
padding:2px;
border-radius:4px;
font-size:120%;
display: block;
margin-left: auto;
margin-right: auto;
text-align:center;
}
#board {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 1%;

}
#canvase {
height:300;
width:400;
border:2px solid black;
border-radius:4px;
position:relative; 
 display: block;
margin-left: auto;
margin-right: auto;
margin-top: 1%;
}
#clearbutton {
font-size: 150%;
padding: 2px;
-webkit-appearance: none;
background: green;
border: 1px solid black;
color:white;
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>

<body onload="init()">
<div id="whole">
    <div id="instructions">
         Sign name by tapping or dragging in box (draw slowly to  prevent single <br/><br/>
         <input type="submit" value="Clear Board" id="clearbutton" onclick="clearCanvas(canvas,ctx);">
    </div>
    <div id="board">
        <canvas id="canvase" height="300" width="400">
        </canvas>
    </div>
</div>
</body>
</html>

Does anyone have any thoughts on this issue or a way to fix it? 是否有人对此问题有任何想法或解决方法？

Answer 1

Seems like the canvase_touchStart event is causing the issue. 似乎是canvase_touchStart事件引起了该问题。

You may remove the line canvas.addEventListener('touchstart', canvase_touchStart, false); 您可以删除行canvas.addEventListener('touchstart', canvase_touchStart, false); and the corresponding function function canvases_touchStart() {...} 以及相应的函数function canvases_touchStart() {...}

CODEPEN CODEPEN

Hope this helps. 希望这可以帮助。

PS: To know how to create a smoother effect, you may refer to this CODEPEN as well. PS：要知道如何创建更平滑的效果，您也可以参考此CODEPEN 。

用触摸HTML画布绘制仅绘制点

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-03-12 14:21:27

用触摸HTML画布绘制仅绘制点

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-03-12 14:21:27

解决方案1
0 已采纳 2018-03-12 14:21:27