Canvas e media queries per responsive design

Jakub Lemiszewski

Utente Attivo
5 Dic 2013
119
1
0
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
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%; 

}

}
 

LorenzoPi

Utente Attivo
21 Gen 2014
98
0
0
Mi sa che per landscape e portrait nelle media queries devi aggiungere l'orientamento, cioè in questo modo:
Codice:
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) and (orientation : landscape){
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) and (orientation : portrait) {
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%; 

}

}
Non so se funziona! fammi sapere :)
 

Jakub Lemiszewski

Utente Attivo
5 Dic 2013
119
1
0
Mi sa che per landscape e portrait nelle media queries devi aggiungere l'orientamento, cioè in questo modo:
Codice:
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) and (orientation : landscape){
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) and (orientation : portrait) {
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%; 

}

}
Non so se funziona! fammi sapere :)
Grazie ho provato ma mi sparisce tutto in questo modo. Cmq ho anche un problema che il draw su touch non è in sincronia con il tap del dito sullo schermo comincia ad apparire la riga diverso tempo dopo. Cmq grazie.
 
Discussioni simili
Autore Titolo Forum Risposte Data
L Come caricare un'immagine in Canvas dinamicamente Javascript 0
L salvare una immagine elaborata in canvas Javascript 1
L salvare una immagine elaborata in canvas Javascript 1
D [Javascript] salvare immagine canvas - paypal Javascript 0
M [Javascript] Canvas js css Javascript 1
L [Javascript] input variabili di scrittura con canvas Javascript 2
lidya123 [Javascript] Canvas circle e coordinate Javascript 7
R Sostiture il colore di sfondo di un'immagine con canvas e drawImage... dove sbaglio? Javascript 1
F Problema effetto flip su canvas Javascript 0
L [RISOLTO]inserire funzione in un oggetto (HTML5+canvas) Javascript 2
criric Javascript & canvas Javascript 2
L Problema collisioni con canvas e mouse HTML e CSS 0
J Incredible and Amazing 3D JavaScript Canvas Enginges Javascript 0
Matt89 [php gd library] inserire un'immagine in un canvas PHP 3
C media per riga MySQL 1
T contatore totale click e media in secondi PHP 7
C [VENDO] Social Media Manager - SEO - ADS Offerte e Richieste di Lavoro e/o Collaborazione 0
F Corso social media marketing Altri Annunci 0
C [Offro][Retribuito] Social Media Manager al miglior prezzo! Offerte e Richieste di Lavoro e/o Collaborazione 0
S [PHP] Estrarre dati da tabella e fare la media ad intervalli di tempo PHP 10
Tommy03 [PHP] Media valori presi da una query PHP 3
P (Cerco) Collaboratori per gestione social media Offerte e Richieste di Lavoro e/o Collaborazione 5
M [RISOLTO]Windows media player non mi funziona più su win 10 pro 64 bit Windows e Software 2
B Inquadramento Social Media Manager Leggi, Normative e Fisco 2
Instagramsocialmedia 151K Vendo pagina Instagram e servizi Media social Marketing Annunci servizi di Social Media Marketing 1
Instagramsocialmedia Social media Marketing mi presento Presentati al Forum 0
bubino8 [HTML] @media screen Errore px HTML e CSS 4
T [RETRIBUITO] Risolvere problemi di geometria livello 2a media Offerte e Richieste di Lavoro e/o Collaborazione 4
xone Partita iva come consulente SEO e social media Leggi, Normative e Fisco 1
skiri Cerco Esperto in webmaster marketing SEO & Social Media Offerte e Richieste di Lavoro e/o Collaborazione 4
booklisa Compressione immagini e gestione media CMS (Content Management System) 1
Alessandro Ad Adbooth Media Group, piattaforma di pubblicità Vendere e Acquistare pubblicita' online 0
asevenx Problema compatibilità browser con @media screen HTML e CSS 2
C Social Media Marketing: Facebook VS Instant messaging App Social Media Marketing 1
asevenx @media screen per stili responsive non riconosciuti HTML e CSS 3
M problema con media query CSS HTML e CSS 1
N Aiuto con html nascondere i media HTML e CSS 4
J Media queries HTML e CSS 1
F inserire un video windows media player HTML e CSS 2
P Problema con media queries HTML e CSS 2
F break point media queries HTML e CSS 2
A css media query HTML e CSS 1
A Scartare righe in una media MySQL 2
M media di alcune variabili PHP 4
F media query HTML e CSS 1
L Media queries e jquery mobile jQuery 0
L Centri Media in Italia: mappa dei clienti (aggiornata) SEO e Posizionamento 9
K Nascondere i css3 ai vecchi broswer usando @media HTML e CSS 0
F Ciao da Fandango Media Group! Presentati al Forum 2
B collegare telecamera a media player Javascript 0

Discussioni simili