How to flip an animated image of an element image on a canvas,

How to flip an animated image of an element image on a canvas,

I. preview the horizontal image flip effect of the Canvas Image

Click here: canvas horizontal image flip animation demo

On the demo page, click the image to see the animation effect.

Ii. Image flip on Canvas

It is relatively simple to implement the element flip effect in CSS. For example, if we want to flip a horizontal image of an image, we only need a line of CSS:

img {    transform: scaleX(-1);}

Or:

img {    transform: scale(-1, 1);}

However, in the canvas, it is a little more troublesome. The trouble is not to flip, but to locate the coordinate system.

In Canvas, the following code is used to flip a horizontal image of a resource (assuming that context is the 2d context of Canvas ):

context.scale(-1, 1);

Alternatively, use setTransform API to directly perform matrix transformation:

context.setTransform(-1, 0, 0, 1, 0, 0);

However, although the flip is implemented, element locating in the Canvas becomes a major problem. This is because the Coordinate Transformation of Canvas is different from that of CSS. Therefore, if we want to implement center flip, we need to move the center of the target element to the transform axis before turning.

Take the horizontal flip distance and the horizontal offset after the translate displacement transformation before scale, then you can see the effect of the center flip.

The language is pale.

The default Coordinate System of canvas is the upper left corner.

Therefore, if the horizontal scale is 1, 0.5, 0,-0.5,-1, the final position is shown as follows:

The formula for horizontal distance to be offset is obtained:

distance = (canvas.width – image.width * scale) / 2;

As a result, the key code of the final image to draw the image becomes like this (assuming that the horizontal scaling is scale ):

// Adjust the context according to the coordinates. translate (canvas. width-image. width * scale)/2, 0); context. scale (scale, 1); context. drawImage (image, 0, 0); // For the coordinates, see restore context. setTransform (1, 0, 0, 1, 0, 0 );

How can we increase the animation effect?

We can use Tween. js, https://github.com/zhangxinxu/tween

There are various easing algorithms in it. With the convenient call of the Math. animation () method, we can easily achieve the desired results!

Math.animation(form, to, duration, easing, callback);

Animation JS is as follows:

Var canvas = document. querySelector ('canvas '); var context = canvas. getContext ('2d '); // animation for Math. animation (1,-1,600, 'quad. easeinout', function (value, isEnding) {// clear the context of the canvas. clearRect (0, 0, canvas. width, canvas. height); // adjust the coordinate context. translate (canvas. width-canvas. width * value)/2, 0); // adjust the zoom context. scale (value, 1); // draw the context of the image at this time. drawImage (eleImg, 0, 0); // For the coordinates, see restore context. setTransform (1, 0, 0, 1, 0, 0 );});

Iii. Conclusion

It is also a cold article, canvas, which has a few front-ends and a limited audience. It is no better than popular technology. However, there is a cloud in the old saying, and it is not good or small. I hope some friends will be able to provide help when searching for related problems in the future.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.