Salve,
Ho creato un codice per poter avere un rettangolo canvas per poter disegnare su un device touch. Ho implementato le media queries che pero non funzionano e vorrei capire perchè. Non ho ancora implementato quella per i tablet perchè prima vorrei risolvere il mio problema.
Quello che le queries dovrebbero fare e che su 2 device smartphone e tablet visualizzo il canvas sia in portrait che landscape al 90% della superficie del device. Di seguito il codice intero con il link che va aperto su un device dove vdrete il problema. Grazie mille dell'aiuto.
http://jaku0260.keaweb.dk/responsive_designM8/multitouch.htm
Ho creato un codice per poter avere un rettangolo canvas per poter disegnare su un device touch. Ho implementato le media queries che pero non funzionano e vorrei capire perchè. Non ho ancora implementato quella per i tablet perchè prima vorrei risolvere il mio problema.
Quello che le queries dovrebbero fare e che su 2 device smartphone e tablet visualizzo il canvas sia in portrait che landscape al 90% della superficie del device. Di seguito il codice intero con il link che va aperto su un device dove vdrete il problema. Grazie mille dell'aiuto.
http://jaku0260.keaweb.dk/responsive_designM8/multitouch.htm
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>
Jake's Multitouch
</title>
<link rel="stylesheet" href="paint.css">
<script>
var canvas;
var ctx;
var lastPt = new Object();
var colours = ['red', 'green', 'blue', 'yellow','black'];
function init() {
var touchzone = document.getElementById("canvasbox");
// stop default document drag behavior
document.addEventListener("touchmove", function(e){
e.preventDefault();
}, false);
touchzone.addEventListener("touchmove", draw, false);
touchzone.addEventListener("touchend", end, false);
canvas = document.getElementById('canvasbox');
ctx = canvas.getContext("2d");
}
function draw(e) {
var fingerX, fingerY
console.log(e);
for(var i=0;i<e.touches.length;i++) {
var id = e.touches[i].identifier;
if(lastPt[id]) {
fingerX = e.touches[i].pageX - this.offsetLeft;
fingerY = e.touches[i].pageY - this.offsetTop;
ctx.beginPath();
ctx.moveTo(lastPt[id].x, lastPt[id].y);
ctx.lineTo( fingerX, fingerY );
ctx.strokeStyle = colours[id%4];
ctx.lineWidth = 3;
ctx.stroke();
}
lastPt[id] = {x:fingerX, y:fingerY};
}
e.preventDefault();
}
function end(e) {
e.preventDefault();
for(var i=0;i<e.changedTouches.length;i++) {
var id = e.changedTouches[i].identifier;
delete lastPt[id];
}
}
</script>
</head>
<body onload="init()">
<canvas id="canvasbox">
Canvas element not supported.
</canvas>
</body>
</html>
Codice:
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
body{
width: 100%;
height: 100%;
margin: 0;
padding:0;
}
#canvasbox {
position:absolute;
margin:auto;
top:0; left:0; bottom:0; right:0;
border: 2px black solid;
width: 90%;
height: 90%;
}
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
body{
width: 100%;
height: 100%;
margin: 0;
padding:0;
}
#canvasbox {
position:absolute;
margin:auto;
top:0; left:0; bottom:0; right:0;
border: 2px red solid;
width: 90%;
height: 90%;
}
}
