javascript - How to transform images on canvas?

Question

For example, I have a picture as shown below

<img src="image.jpg" width="1280px" height="600px" class="face-image" style="transform: translate(6px, 6px) scale(1.5) rotate(100deg);">

The width and height of the picture is 1280x600, and the transform attribute is transform: translate(6px, 6px) scale(1.5) rotate(100deg);

Excuse me, I created a canvas of 1280x600, how can I make the image transform on the canvas according to the parameters of transfrom?

The final size of the canvas will not change.

Answer 1

These three APIs are available on the ctx object on canvas. You can check it out, but you should pay attention to one thingThe transformation of canvas is the origin transformation, similar to the transform-origin:0,0 in the css attribute, but the css transformation attribute The default is center centerSo this involves a relatively classic problem on canvas called howhow to move the anchor pointSimply speaking, it is done by using the negative value of the transform of the canvas. Mobile typing cannot demonstrate it to you.

Here is a simple method for the poster. The poster also sets the transform-origin of the image to 0,0. At this time, the parameters to achieve your previous effect will be exactly the same as the canvas value

If you don’t understand the soundless computer outside, I can try to help you implement it when you get back. However, from a growth perspective, I recommend that you write the implementation code yourself according to the link above

Answer 2

https://github.com/wanadev/pe...
demo http://www.html5.jp/test/pers...
This may help you

Answer 3

I have found the answer to this question, thank you@foreignerjack for the answer
/q/10...