84 lines
2.7 KiB
HTML
84 lines
2.7 KiB
HTML
<html>
|
|
<head>
|
|
<meta name="viewport"
|
|
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style"
|
|
content="black-translucent" />
|
|
</head>
|
|
<body>
|
|
<canvas id=inp width='300' height='500' style="border:1px solid #000000;"></canvas>
|
|
<div id=out style="width: 300px;"></div>
|
|
<script>
|
|
var canvas=document.getElementById("inp");
|
|
var rect = canvas.getBoundingClientRect();
|
|
console.log(rect);
|
|
// Setup canvas and expose context via ctx variable
|
|
ctx=canvas.getContext("2d");
|
|
function strt(touch) {
|
|
return {i:touch.identifier,x:touch.pageX,y:touch.pageY}
|
|
}
|
|
function stre(event) {
|
|
if (event.touches) {
|
|
t = {};
|
|
for (var i=0; i<event.touches.length;i++) {
|
|
id=event.touches[i].identifier.toString();
|
|
t[id] = strt(event.touches[i]);
|
|
}
|
|
tc = [];
|
|
for (var i=0; i<event.changedTouches.length;i++) {
|
|
id=event.touches[i].identifier.toString();
|
|
t[id]['changed'] = 1;
|
|
}
|
|
for (var i=0; i<event.targetTouches.length;i++) {
|
|
id=event.touches[i].identifier.toString();
|
|
t[id]['target'] = 1;
|
|
}
|
|
}
|
|
return {type:event.type,x:event.pageX,y:event.pageY,t:t};
|
|
}
|
|
|
|
var styles=["rgba(0, 0, 200, 1)", "rgba(0, 255, 0, 1)", "rgba(255, 0, 0, 1)"]
|
|
canvas.addEventListener('touchstart', function(event) {
|
|
for (var i = 0; i < event.touches.length; i++) {
|
|
var touch = event.touches[i];
|
|
ctx.beginPath();
|
|
ctx.arc(touch.pageX-rect.left, touch.pageY-rect.top, 5, 0, 2*Math.PI, true);
|
|
ctx.lineWidth = 2.0;
|
|
ctx.strokeStyle = styles[i];
|
|
ctx.stroke();
|
|
}
|
|
}, false);
|
|
canvas.addEventListener('touchmove', function(event) {
|
|
document.getElementById("out").innerHTML = JSON.stringify(stre(event));
|
|
event.preventDefault();
|
|
for (var i = 0; i < event.touches.length; i++) {
|
|
var touch = event.touches[i];
|
|
ctx.beginPath();
|
|
ctx.arc(touch.pageX-rect.left, touch.pageY-rect.top, 1, 0, 2*Math.PI, true);
|
|
ctx.lineWidth = 2.0;
|
|
ctx.strokeStyle = styles[i];
|
|
ctx.stroke();
|
|
}
|
|
}, false);
|
|
canvas.addEventListener('touchend', function(event) {
|
|
for (var i = 0; i < event.changedTouches.length; i++) {
|
|
var touch = event.changedTouches[i];
|
|
ctx.beginPath();
|
|
ctx.arc(touch.pageX-rect.left, touch.pageY-rect.top, 50, 0, 2*Math.PI, true);
|
|
ctx.lineWidth = 2.0;
|
|
ctx.strokeStyle = styles[i];
|
|
ctx.stroke();
|
|
}
|
|
}, false);
|
|
canvas.addEventListener('click', function(event) {
|
|
console.log(event);
|
|
ctx.beginPath();
|
|
ctx.arc(event.clientX-rect.left, event.clientY - rect.top, 2, 0, 2*Math.PI, true);
|
|
ctx.lineWidth = 2.0;
|
|
ctx.strokeStyle = "rgba(0, 0, 200, 0.8)";
|
|
ctx.stroke();
|
|
}, false);
|
|
|
|
</script>
|
|
</body></html> |