javascript - How to transform images on canvas?-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

javascript - How to transform images on canvas?

黄舟 2017-05-16 13:23:58

416

For example, I have a picture as shown below

The width and height of the picture is1280x600, and thetransformattribute istransform: translate(6px, 6px) scale(1.5) rotate(100deg);

Excuse me, I created a canvas of1280x600, how can I make the image transform on the canvas according to the parameters oftransfrom?

The final size of the canvas will not change.

黄舟

人生最曼妙的风景，竟是内心的淡定与从容！

reply all (3)

小葫芦2017-05-16 13:25:58 3 floor

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