HTML5 canvas in tempo reale
Produzione colori comopositi - live
Rosso:
0 255
Verde:
0 255
Blu:
0 255
Muovere gli indicatore per miscelare il colore.
In alto alto il valori di ciascun colore.
LISTATO DELLA PAGINA WEB
Su di una pagine web, il risultato visivo degli indicatori potrebbe essere leggermente diverso.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
function ValoriSuCanvas(){
ctx.beginPath(); // scrive come testo i valori dei colori
ctx.font = "14px Arial"; ctx.fillStyle = '#000';
ctx.fillText("Rosso = "+$Rosso+" Verde = "+$Verde+" Blu = "+$Blu, 8, 30);
}
var $Rosso = 255, $Verde = 0, $Blu = 0; // inizialivva variabili dei colori
ctx.beginPath(); // disegna corconfrenza default rossa
ctx.arc(200, 150, 100, 0, 2 * Math.PI, false);
ctx.fillStyle = 'red';
ctx.fill();
ValoriSuCanvas(); // scrive com testo i valori si colori di default
$(".colore").change(function(){ // in ascolt del cambiamento di valore degli indicatori
$Rosso = parseFloat($('[name="Rosso"]').val());
$Verde = parseFloat($('[name="Verde"]').val());
$Blu = parseFloat($('[name="Blu"]').val());
var Colore = 'rgb(' + $Rosso + ',' + $Verde + ',' + $Blu + ')'; // crea il nuovo colore
ctx.clearRect(0, 0, 400, 300); // cancella canvas
ctx.beginPath();
ctx.arc(200, 150, 100, 0, 2 * Math.PI, false); // calcola circonferenza
ctx.fillStyle = Colore; // praparazioen del colore
ctx.fill(); // colrora la circonferenza del nuovo colore
ValoriSuCanvas(); // scrive com testo i valori dei colori
});
});
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
<p style="background-color:#F00;">Rosso:<br /><input class="colore" type="range" id="Rosso" name="Rosso" value="255" min="0" max="255"> 255</p>
<p style="background-color:#0F0;">Verde:<br /><input class="colore" type="range" id="Verde" name="Verde" value="0" min="0" max="255"> 255</p>
<p style="background-color:#00F;">Blu:<br /><input class="colore" type="range" id="Blu" name="Blu" value="0" min="0" max="255"> 255</p>
</body>
</html>
-
Acquistabile da:
- bookrepublic
- ebook LeggoOggi.it
- EURONICS
- freeonline
- Gola Ad
- GPLAY
- HOEPLI
- iTunes
- kobo
- omnia BUK
- SECRETARY
- StreetLib
Art-designer