最近我一直在使用响应式设计，我决定用一些引号创建一个页面，然后在那里你可以签名。您可以签名的地方使用鼠标和触摸事件在画布上绘制。它可以与鼠标完美配合，但是当我尝试拖动并绘制它时只有高亮显示框但是我可以通过点击一次绘制一个点，但我希望它像鼠标一样正常拖动。我已经设置了默认关闭但是我仍然无法修复此问题。我不知道它是否与用触摸突出显示的画布有关。以下是触摸的个别代码，不在我的网站中，而是在画布网页中：
<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>
有没有人对这个问题有任何想法或解决方法？