Anonymous Anonymous - 2 months ago
401 0

No description

HTML

multitouchtest.html

<!DOCTYPE html>
<html>

<head>
	<title>Touch Tracker Marker</title>
	<meta name="viewport" content="width=device-width, user-scalable=no">
	<style type="text/css">
		body {
			margin: 0px;
			overflow: hidden;
		}

		canvas {
			border: 1px solid black;
		}

		#info {
			position: absolute;
			bottom: 0;
			right: 0;
			width: 300px;
			height: 300px;
			background-color: rgba(0, 0, 0, 0.75);
			color: white;
			font-family: 'Courier New', Courier, monospace;
			font-weight: bold;
			padding: 0.25em;
			margin: 0;
		}
	</style>
	<script type="text/javascript">

		var canvas;
		var ctx;
		var w = 0;
		var h = 0;

		var timer;
		var updating = false;
		var touches = [];

		function update() {
			var infotext = '';
			
			if (updating)
				return;

			updating = true;

			infotext += 'Touches: ' + touches.length;

			var nw = window.innerWidth;
			var nh = window.innerHeight;

			if ((w != nw) || (h != nh)) {
				w = nw;
				h = nh;
				canvas.style.width = w + 'px';
				canvas.style.height = h + 'px';
				canvas.width = w;
				canvas.height = h;
			}

			ctx.clearRect(0, 0, w, h);

			var i, len = touches.length;
			for (i = 0; i < len; i++) {
				var touch = touches[i];
				var px = touch.pageX;
				var py = touch.pageY;

				ctx.beginPath();
				ctx.arc(px, py, 40, 0, 2 * Math.PI, true);

				let red =   (i * 75)%256;
				let green = (red * 60)%256;
				let blue =  (green * 50)%256;
				let color = 'rgba(' + red + ', ' + green + ', ' + blue + ', ';

				ctx.fillStyle = color + "0.2)";
				ctx.fill();

				ctx.lineWidth = 2.0;
				ctx.strokeStyle = color + "0.8)";
				ctx.stroke();

				infotext += "<br>+ <span style='color: " + color + "1)'>" + leftpad(px, 4) + " x " + leftpad(py, 4) + '</span>'
			}

			document.getElementById('info').innerHTML = infotext;
			updating = false;
		}
		
		function leftpad(n, width, z) {
			z = z || '0';
			n = n + '';
			return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
		}

		function setup() {
			canvas = document.getElementById('canvas');
			ctx = canvas.getContext('2d');
			timer = setInterval(update, +(1000/60));

			canvas.addEventListener('touchend', function (event) {
				ctx.clearRect(0, 0, w, h);
				touches = event.touches;
			});

			canvas.addEventListener('touchmove', function (event) {
				event.preventDefault();
				touches = event.touches;
			});

			canvas.addEventListener('touchstart', function (event) {
			});
		};

	</script>
</head>

<body onload="setup()">

	<canvas id="canvas" width="300" height="300" style="top:0px; left:0px; width: 300px; height: 300px;"></canvas>
	<div id="info"></div>
</body>

</html>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download