Ora creo un imageData.
<!DOCTYPE html>
<html>
<head>
<script>
var canvas;
var ctx;
var x;
var y;
var alfa;
var sfondo = new Image();
function inizia(){
canvas=document.getElementById("myCanvas");
ctx=canvas.getContext("2d");
ctx.fillStyle="#FFFFCC";
ctx.rect(0,0,600,600);
ctx.fill();
elabora();
}
function elabora(){
var imgData = ctx.createImageData(100, 1);
for (var i = 0; i < 100; i+=4) {
imgData.data[i]=255;
imgData.data[i+1]=0;
imgData.data[i+2]=0;
imgData.data[i+3]=255;
}
ctx.putImageData(imgData, 10, 10);
}
window.addEventListener("load", inizia);
</script>
</head>
<body>
<canvas id="myCanvas" width="600" height="600">
</canvas>
</body>
</html>
Ho creato un'immagine di dimensioni 100 x 1;Definisco i valori dei pixel ogni 4: rosso, verde, blu, trasparenza;
Metto l'immagine creata alle coordinate 10,10.
Ed ecco che viene fuori una striscia rossa orizzontale.
Come primo passo andiamo bene.
Nessun commento:
Posta un commento