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.
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.
hai definito width e height come attributi nel canvas?
Vuoi aiutare la riforestazione responsabile?
Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)
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
jsfiddle.net/F9mKB/
a me funziona con firefox 9, con il colore correttamente impostato.
Vuoi aiutare la riforestazione responsabile?
Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)
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.
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
Permessi di invio
Rispondi quotando