Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
175 lines (132 sloc) 4.13 KB
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
<title></title>
<style type="text/css">
* {
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
/* make transparent link selection, adjust last value opacity 0 to 1.0 */
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
body {
background-color: #000000;
margin: 0px;
}
canvas {
background-color:#111133;
display:block;
position:absolute;
}
.container {
width:auto;
text-align:center;
background-color:#ff0000;
}
</style>
</head>
<body onload = "init()">
<script src="../libs/Vector2.js"></script>
<script>
var canvas,
c, // c is the canvas' context 2D
container;
setupCanvas();
var mouseX, mouseY,
// is this running in a touch capable environment?
touchable = 'createTouch' in document,
touches = []; // array of touch vectors
setInterval(draw, 1000/35);
if(touchable) {
canvas.addEventListener( 'touchstart', onTouchStart, false );
canvas.addEventListener( 'touchmove', onTouchMove, false );
canvas.addEventListener( 'touchend', onTouchEnd, false );
window.onorientationchange = resetCanvas;
window.onresize = resetCanvas;
} else {
canvas.addEventListener( 'mousemove', onMouseMove, false );
}
function resetCanvas (e) {
// resize the canvas - but remember - this clears the canvas too.
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
//make sure we scroll to the top left.
window.scrollTo(0,0);
}
function init(){
}
function draw() {
c.clearRect(0,0,canvas.width, canvas.height);
if(touchable) {
for(var i=0; i<touches.length; i++)
{
var touch = touches[i];
c.beginPath();
c.fillStyle = "white";
c.fillText("touch id : "+touch.identifier+" x:"+touch.clientX+" y:"+touch.clientY, touch.clientX+30, touch.clientY-30);
c.beginPath();
c.strokeStyle = "cyan";
c.lineWidth = "6";
c.arc(touch.clientX, touch.clientY, 40, 0, Math.PI*2, true);
c.stroke();
}
} else {
c.fillStyle = "white";
c.fillText("mouse : "+mouseX+", "+mouseY, mouseX, mouseY);
}
//c.fillText("hello", 0,0);
}
/*
* Touch event (e) properties :
* e.touches: Array of touch objects for every finger currently touching the screen
* e.targetTouches: Array of touch objects for every finger touching the screen that
* originally touched down on the DOM object the transmitted the event.
* e.changedTouches Array of touch objects for touches that are changed for this event.
* I'm not sure if this would ever be a list of more than one, but would
* be bad to assume.
*
* Touch objects :
*
* identifier: An identifying number, unique to each touch event
* target: DOM object that broadcast the event
* clientX: X coordinate of touch relative to the viewport (excludes scroll offset)
* clientY: Y coordinate of touch relative to the viewport (excludes scroll offset)
* screenX: Relative to the screen
* screenY: Relative to the screen
* pageX: Relative to the full page (includes scrolling)
* pageY: Relative to the full page (includes scrolling)
*/
function onTouchStart(e) {
touches = e.touches;
}
function onTouchMove(e) {
// Prevent the browser from doing its default thing (scroll, zoom)
e.preventDefault();
touches = e.touches;
}
function onTouchEnd(e) {
touches = e.touches;
}
function onMouseMove(event) {
mouseX = event.offsetX;
mouseY = event.offsetY;
}
function setupCanvas() {
canvas = document.createElement( 'canvas' );
c = canvas.getContext( '2d' );
container = document.createElement( 'div' );
container.className = "container";
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild( container );
container.appendChild(canvas);
c.strokeStyle = "#ffffff";
c.lineWidth =2;
}
</script>
</body>
</html>