[英]Drawing with touch html canvas only drawing dots
最近,我一直在进行响应式设计,因此我决定在页面上加一些引号,然后在该位置上签名。 您可以签名的地方使用鼠标和触摸事件在画布上绘制。 它可以完美地与鼠标配合使用,但是当我尝试拖动并绘制它时,只需触摸加亮框即可,但是我可以通过点击一次绘制一个点,但我希望它像鼠标一样正常拖动。 我已将默认设置为“关闭”,但是仍然无法解决此问题。 我不知道是否与触摸突出显示的画布有关。 以下是触摸的单独代码,它们不在我的网站上,而是在画布网页上:
<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>
是否有人对此问题有任何想法或解决方法?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.