Pourquoi ne de la Toile du putImageData fonctionne pas alors que j'ai spécifié l'emplacement cible?
En essayant de trouver de la documentation pour la Toile contexte de putImageData() la méthode, j'ai trouvé des choses comme ceci:
contexte.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);
(à partir de http://www.w3schools.com/tags/canvas_putimagedata.asp)
D'après la documentation que j'ai lu, x et y sont d'un index dans la source image, tandis que les dirtyX et dirtyY de spécifier les coordonnées de la cible de toile où tracer l'image. Pourtant, comme vous allez le voir dans l'exemple ci-dessous (et JSFiddle) un appel à putImageData(imgData,x,y) les travaux, tandis que putImageData(imgData, 0, 0, locX, locY) ne fonctionne pas. Je ne sais pas pourquoi.
EDIT:
Je suppose que ma vraie question est pourquoi la ligne du haut de l'image est en noir, et il y a seulement 7 lignes, pas 8. Les images devraient commencer en haut à gauche de la Toile. Ils NE commencent à la gauche (et 8 colonnes). Pourquoi n'ont-ils pas commencer par le haut?
Réponse: que c'est dû à la division par 0 sur cette ligne yLoc est 0:
xoff = imgWidth / (yLoc/3);
Le JSFiddle:
Code:
<html>
<head>
<title>Canvas tutorial</title>
<script type="text/javascript">
var canvas;
var context; //The canvas's 2d context
function setupCanvas()
{
canvas = document.getElementById('myCanvas');
if (canvas.getContext)
{
context = canvas.getContext('2d');
context.fillStyle = "black"; //this is default anyway
context.fillRect(0, 0, canvas.width, canvas.height);
}
}
function init()
{
loadImages();
startGating();
}
var images = new Array();
var gatingTimer;
var curIndex, imgWidth=0, imgHeight;
//Load images
function loadImages()
{
for (n = 1; n <= 16; n++)
{
images[n] = new Image();
images[n].src = "qxsImages/frame" + n + ".png";
// document.body.appendChild(images[n]);
console.log("width = " + images[n].width + ", height = " + images[n].height);
}
curIndex = 1;
imgWidth = images[1].width;
imgHeight = images[1].height;
}
function redrawImages()
{
if (imgWidth == 0)
return;
curIndex++;
if (curIndex > 16)
curIndex = 1;
//To do later: use images[1].width and .height to layout based on image size
for (var x=0; x<8; x++)
{
for (var y=0; y<8; y++)
{
//if (x != 1)
// context.drawImage(images[curIndex], x*150, y*100);
// context.drawImage(images[curIndex], x*150, y*100, imgWidth/2, imgHeight/2); //scale
// else
self.drawCustomImage(x*150, y*100);
}
}
}
function drawCustomImage(xLoc, yLoc)
{
//create a new pixel array
imageData = context.createImageData(imgWidth, imgHeight);
pos = 0; //index position into imagedata array
xoff = imgWidth / (yLoc/3); //offsets to "center"
yoff = imgHeight / 3;
for (y = 0; y < imgHeight; y++)
{
for (x = 0; x < imgWidth; x++)
{
//calculate sine based on distance
x2 = x - xoff;
y2 = y - yoff;
d = Math.sqrt(x2*x2 + y2*y2);
t = Math.sin(d/6.0);
//calculate RGB values based on sine
r = t * 200;
g = 125 + t * 80;
b = 235 + t * 20;
//set red, green, blue, and alpha:
imageData.data[pos++] = Math.max(0,Math.min(255, r));
imageData.data[pos++] = Math.max(0,Math.min(255, g));
imageData.data[pos++] = Math.max(0,Math.min(255, b));
imageData.data[pos++] = 255; //opaque alpha
}
}
//copy the image data back onto the canvas
context.putImageData(imageData, xLoc, yLoc); //Works... kinda
// context.putImageData(imageData, 0, 0, xLoc, yLoc, imgWidth, imgHeight); //Doesn't work. Why?
}
function startGating()
{
gatingTimer = setInterval(redrawImages, 1000/25); //start gating
}
function stopGating()
{
clearInterval(gatingTimer);
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="setupCanvas(); init();">
<canvas id="myCanvas" width="1200" height="800"></canvas>
</body>
</html>
La ligne du haut de l'image est en noir, mais devrait avoir un peu de de la bleu/blanc images.
OriginalL'auteur Vern Jensen | 2013-08-03
Vous devez vous connecter pour publier un commentaire.
Vous venez d'avoir vos coordonnées à l'envers.
Démonstration En Direct
xLoc
, etyLoc
sont où vous poser, et0,0,imgWidth,imgHeight
est les données que vous mettez sur la toile.Un autre exemple montrant.
Beaucoup de documents en ligne semblent un peu contradictoires, mais pour les sept param version
la dx et dy sont à votre destination, les quatre paramètres sont la sale rect paramètres, essentiellement le contrôle de ce vous êtes dessin de la source de la toile. Un des la plupart des descriptions minutieuses que je peux trouver dans le livre HTML5, déclenchée par Simon Sarris (pg. 165).
C'est à cause de cette ligne
xoff = imgWidth / (yLoc / 3);
la division par 0 est en train de jeter toute la rangée du haut, rien à voir avecputImageData
heureusement. jsfiddle.net/loktar/WZynM/5 je l'ai changé pourxoff = imgWidth/3
juste pour illustrer.Merci! Trouvé la même chose, juste maintenant, à moi-même avant même de voir votre post. 😉
comme quelqu'un qui possède ce livre: j'pouvez vérifier que vous devriez l'obtenir et de le lire.
wow, j'ai lu "Hauteur du rectangle à peindre" pour dire qu'il était échelle de l'image en hauteur, ce qui est totalement pas ce qu'il fait.
OriginalL'auteur Loktar
Avoir été à l'aide de cette récemment, j'ai découvert que Loktar ci-dessus a frappé sur une question TRÈS importante. En gros, une partie de la documentation de cette méthode en ligne est incorrecte, particulièrement dangereux par exemple W3Schools, à laquelle un certain nombre de personnes vont se tourner vers des fins de référence.
Leurs états de documentation suivants:
Synopsis:
Arguments:
Comme Loktar états ci-dessus, le synopsis est le suivant:
Corriger Synopsis:
Arguments:
Utiliser le corriger synopsis ci-dessus, et vous n'aurez pas les problèmes qui ont été rencontrés ci-dessus.
Je vais vous donner un grand chapeau astuce pour Loktar pour trouver cela au départ, mais j'ai pensé qu'il pertinent d'offrir un plus grand réponse dans le cas d'autres exécutent dans le même problème.
OriginalL'auteur David Edwards