Scripticus
Mitglied
Liebe Community,
da ich hauptsächlich, wenn ich mit html usw. arbeite, mobile "Apps" Websites mache (Ich mache nur kleine aus Spaß) habe ich Probleme mit Mauszeiger als Eventlistener am Pc.
Kann mir jemand helfen diesen einfachen und simplen Code auch für den Pc mit der Maus es machen zu können:
mann müsste eigentlich nur im letzten Abschnitt des Codes was ändern und in den Variablen "touchStart" und "touchMove".
Ich bin über jeden Vorschlag dankbar.
Mit freundlichen Grüßen
Scripticus
da ich hauptsächlich, wenn ich mit html usw. arbeite, mobile "Apps" Websites mache (Ich mache nur kleine aus Spaß) habe ich Probleme mit Mauszeiger als Eventlistener am Pc.
Kann mir jemand helfen diesen einfachen und simplen Code auch für den Pc mit der Maus es machen zu können:
Code:
<!DOCTYPE html>
<html lang="de">
<head>
<title>Zeichnen</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}
#canvas {
outline: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvasElement = document.querySelector('#canvas');
canvasElement.setAttribute('width', window.innerWidth);
canvasElement.setAttribute('height', window.innerHeight);
var canvas = canvasElement.getContext('2d');
var startX, startY;
canvas.strokeStyle = "#000";
canvas.lineWidth = 5;
var touchStart = function(event) {
startX = event.touches[0].pageX;
startY = event.touches[0].pageY;
canvas.moveTo(startX, startY);
};
var touchMove = function(event) {
event.preventDefault();
canvas.lineTo(event.touches[0].pageX, event.touches[0].pageY);
canvas.stroke();
};
var touchEnd = function(event) {
canvas.stroke();
};
canvasElement.addEventListener("touchend", touchEnd, false);
document.addEventListener("touchstart", touchStart, false);
document.addEventListener("touchmove", touchMove, false);
</script>
</body>
</html>Ich bin über jeden Vorschlag dankbar.
Mit freundlichen Grüßen
Scripticus
