设置HTML Canvas 2D上下文的X和Y（屏幕抖动）

Question

I'm trying to make a screen shake in a game every time you shoot. I recall in Actionscript 3 you could set the x and y of your stage with the following:

stage.x = stx

I was wondering if there is a way to do this with an HTML Canvas 2D Context. I'm currently using the following:

ctx.save();
ctx.translate(0, shakeAmt); 
ctx.restore();

(ctx is my HTML Canvas 2D Context)

This method isn't working for me due to the fact that resetting the canvas every time isn't as smooth as I'd want it to be. Along with this if a shake is called while another shake is running, the canvas will save and restore halfway through a shake.

Is there a JavaScript alternative to stage.x? If not, how could I go about this?

Answer 1

In this case I would recommend apply camera-shake (or machine gun shake perhaps?) to the element itself (which sort of represents the stage). This is because any transform to canvas context does only affect future drawing which means you will have redraw each frame, do-able but require an extra full draw-op per frame while using DOM can update the "stage" in the same cycle.

The problem with shaking the element on the other hand, is that it will move in the view-port, however, you can camouflage this by wrapping it in a div which has overflow set to hidden as well as applying a slight amount of scaling to the canvas element during the shake. You can additionally incorporate an overlap by using a slightly bigger canvas that is offset inside the div.

Conceptual Demo

Click on the image to apply camera shake.

 var style = img.style; // cache style object var amp = 7; // diameter of shake var t = 0; // current shake [0, 1] var step = 0.03; // progress step for each frame img.onclick = function() { if (t) t = 1; // continue loop, but reset else {t = 1; shake()} // start loop } function shake() { var a = (Math.random() * 2 - 1) * t; // random angle var x = (Math.random() * amp * 2 - amp) * t; // random position, bias on x var y = (Math.random() * amp - amp*0.5) * t; var s = Math.max(1, 1.05 * t); // scale to compens. for movement var b = 2 * t; // blur amount // build transform for element var tr = "rotate(" + a + "deg) translate(" + x + "px," + y + "px) scale(" + s + ")"; style.transform = style.webkitTransform = tr; style.filter = "blur(" + b + "px)"; t -= step; if (t > 0) requestAnimationFrame(shake); else { t = 0; style.transform = "matrix(1,0,0,1,0,0)"; // reset transforms style.filter = "blur(0)"; // remove blur } } 

 div { display:block; position:relative; overflow:hidden; width:600px; height:340px; background:rgba(121, 115, 117, 0.2); } #img { position:absolute; left:-5px; top:-5px; width:620px; height:auto; } 

 <div><img id=img src="//i.stack.imgur.com/XmnSd.jpg"></div> 

Answer 2

Using more than one canvas.

You can create a stage by rendering to an offscreen canvas. Though I am ignorant of Actionscripts stage abstraction, having presentation and render canvases separate is a common technique when you need full page post render effects (like shake).

To implement just create 2 canvases, one for the page (presentation canvas) and the offscreen render canvas.

Render to the render canvas as normal, then at the end of frame draw the offscreen canvas onto the presentation canvas.

var rCanvas = document.createElement("canvas"); // render canvas
rCanvas.width = ?
rCanvas.height = ?
var pCanvas = rCanvas.cloneNode(); // presentation canvas
document.body.appendChild(pCanvas); // add to DOM 
var ctx = rCanvas.getContext("2d");  
var pCtx = rCanvas.getContext("2d"); // presentation context

Then render to the render canvas as normal, once the frame has been rendered you can change the position by rendering it offset onto the presentation canvas

pCtx.drawImage(rCanvas,x,y); // present canvas at x, and y

Depending on the type of game you may want to extend the render canvas's size so that when it shakes you do not lose pixels around the edge.

More than just shake.

Using offscreen canvases is not limited to just one. I convert all images, sprite sheets, UI panels, whatnot to canvases. Then present them to the onscreen canvas each frame. This opens up many extra FX not available if just using one canvas, and also reducing the render load, as I only need to re-render only what has changed per frame.

So for example if you have a UI panel separate from the playfield render you can give each a slightly different shake amount, adding a bit of depth to the display. You can brighten the whole play field as well by just rendering the playfield again with pCtx.globalCompositeOperation = "lighter" and pCtx.globalAlpha = amount` to control the level. The flash will add to the shake FX giving a more immersive experience.

You may even have the final presentation canvas as a webGL context opening up unlimited FX possibilities not possible using the DOM while still allowing you to use the 2D API for the main rendering of the game.