Thursday, 15 September 2011

javascript - How do I rotate two images [on the same Canvas] in opposite directions? -


I'm unable to rotate two images in opposite directions using canvas state () and restore () functions.

  program.ctxT.globalCompositeOperation = 'destination-over';  

Any solution here is most appreciated, thanks! Program.ctxT.save (); Program.ctxT.clearRect (x - 1, 0 - 1, 72, 62); Program.ctxT.translate (x + 35, 0 + 25); Program.ctxT.rotate (Math.PI / 135); Program.ctxT.translate (- (x + 35), - (0 + 25)); Program.ctxT.drawImage (program.imgBody, x, 0); Program.ctxT.restore (); Program.ctxT.globalCompositeOperation = 'Destination-over'; Program.ctxT.save (); Program.ctxT.translate (x + 35, 0 + 25); Program.ctxT.rotate (Math.PI / -135); Program.ctxT.translate (- (x + 35), - (0 + 25)); Program.ctxT.drawImage (program.imgHead, x, 0); Program.ctxT.restore (); Sorry about the misunderstanding, I'm still new to posting on Stack Exchange. My problem was not fully understood how () save and () restored the work (), but this is my best explanation; Changes / State changes that you want to apply later and save them, then separate yourself from the changes of the previous state and set a different set of state changes that will be applied to your next image / size. You did not reach the last item that you want to be altered by undefined form (as a note, with the last item, you do not have to save, just drag that item. You want). Now when all the changes have been made and saved and you have drawn your first item, then you use the restored () and then want to draw the item in which you want it to continue for all the dragged items . One important thing is to look at the Global Composite Operation Property, because it determines how your images are standing. Hope this clarification is sound and I apologize for not doing this before.

  Function Update () {// Clean the canvas in the field, our image was in the first place. Program.ctxT.clearRect (X-35, 0 - 18, 108, 81); // Rotate canvas and to save this condition, it will be applied to the body or underlying element rot (35, 25, Math.PI / -135); Program.ctxT.save (); // It keeps track of body rotation; ++; // Apply the same rotation before moving the head with the body. Program (35, 25, Math. PI / -135); / * Although the head increases with the body, it should not change its mouth, hence the compensation. The title says that two images revolve in opposite directions, but this only does so, if you want them to continue in the opposite direction, then multiply the rot by more than one number. * / Programm (8, 8, rot * math.ip / 135); // Draw the overlay image (head) Program.ctxT.drawImage (program.imgHead, x, 0); // Moving on the lower layer, restore the changes that we are using and attract for it. Program.ctxT.restore (); Program.ctxT.drawImage (program.imgBody, x-35, -17.3); } Function rot point (centrex, centri, angle) {// This head allows overlays to be programmed.ctxT.globalCompositeOperation = 'destination-over'; // Translate the first reference so that she can move around the center of the image. Program.ctxT.translate (x + center, 0 + centreY); Program.ctxT.rotate (angle); // Remember to put the reference back in its original state! Program.ctxT.translate (- (x + center), - (0 + centre)); }    

No comments:

Post a Comment