【发布时间】：2018-03-12 22:27:07
【问题描述】：
最近我一直在使用响应式设计，我决定制作一个带有一些引号的页面和一个您可以签名的地方。您可以签名的地方使用鼠标和触摸事件在画布上绘制。它与鼠标完美配合，但是当我尝试拖动和绘制它时触摸它只是突出显示框，但我可以通过点击一次绘制一个点，但我希望它像鼠标一样正常拖动。我已将默认设置设置为关闭，但我仍然无法解决此问题。我不知道它是否与触摸突出显示的画布有关。以下是单独的触摸代码，不是在我的网站中，而是在画布网页中：
<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>
有人对此问题有任何想法或解决方法吗？
【问题讨论】：
标签： javascript html canvas html5-canvas