PDA

Visualizza la versione completa : Problemi di colore e dimensione linea nel canvas


enrico.maffi
19-01-2012, 11:35
Ho provato a disegnare sul canvas ma non possibile disegnare linee con larghezza
di un pixel e soprattutto quando imposto un colore ( hex ) vengono cambiati.

Ho provato sia con Firefox che con Google Chrome.

C' qualcuno che mi pu aiutare?

Grazie Enrico.

explosivdymamic
19-01-2012, 12:45
Disegnare linee di 1px possibile; posta qui il codice... non riesco ad aiutarti con poche informazioni.

enrico.maffi
19-01-2012, 15:33
Ti ringrazio per l'interessamento e ti invio il sorgente:

<head>

<script>

esempio1 = function(){
var contesto = document.querySelector('canvas').getContext('2d');
contesto.canvas.width = contesto.canvas.width;
contesto.strokeStyle = "#FA0000";
contesto.lineWidth = "2";
contesto.beginPath();
contesto.moveTo(5,5);
contesto.lineTo(260,5);
contesto.moveTo(5,10);
contesto.lineTo(5,100);
contesto.stroke();
}

</script>
</head>

saluti e grazie ancora Enrico.

fcaldera
19-01-2012, 23:30
hai definito width e height come attributi nel canvas?

enrico.maffi
20-01-2012, 07:08
ecco, questo il listato tipo:

<head>

<script>

esempio1 = function(){
var contesto = document.querySelector('canvas').getContext('2d');
contesto.canvas.width = contesto.canvas.width;
contesto.strokeStyle = "#FA0000";
contesto.lineWidth = "1";
contesto.beginPath();
contesto.moveTo(5,5);
contesto.lineTo(260,5);
contesto.moveTo(5,10);
contesto.lineTo(5,100);
contesto.stroke();
}

</script>
</head>



<body>

<canvas width="400" height="400"></canvas>
<button type="button" onclick="esempio1();"> Esempio 1 </button>

</body>


e che produce la larghezza linea di due pixel ed il colore diverso da quello impostato.


Grazie per la risposta. Enrico

fcaldera
21-01-2012, 14:46
jsfiddle.net/F9mKB/

a me funziona con firefox 9, con il colore correttamente impostato.

enrico.maffi
21-01-2012, 17:23
anche a me funziona se la linea larga 2 pixel, ma non riesco
ad impostarla ad 1px.
Me la imposta automaticamente a 2px bicolore con colori grigi.

explosivdymamic
21-01-2012, 19:51
Originariamente inviato da enrico.maffi
anche a me funziona se la linea larga 2 pixel, ma non riesco
ad impostarla ad 1px.
Me la imposta automaticamente a 2px bicolore con colori grigi.
Ha me lo script da un colore leggermente pi chiaro, se riclicco il bottone lo da corretto .-.

explosivdymamic
22-01-2012, 10:57
Originariamente inviato da explosivdymamic
Ha me lo script da un colore leggermente pi chiaro, se riclicco il bottone lo da corretto .-.
orrore :mem:

Tonenge
29-01-2012, 18:22
Ciao,
essendo lo spessore della linea di 1 pixel e la sua posizione un numero intero, canvas cerca di centrare lo spessore del tratto nella posizione indicata disegnando due "mezzi pixel"!

modificando lo script nel seguente modo le linee risultano "nitide".

...
contesto.moveTo(5,5.5);
contesto.lineTo(260,5.5);
contesto.moveTo(5.5,10);
contesto.lineTo(5.5,100);
...

Saluti

Loading