How to use rotate canvas in HTML5?

0 like 0 dislike
8 views
How to JS use the rotate method to the canvas element in HTML5?


If I just do context.rotate(0.05) then the image begins to move down for some strange trajectory.


The task is simple: rotate around its axis at 60 degrees to the canvas object.


Give an example.


UPD: What in this code not so?


function html5(){

// eksperementiruyu with HTML5 canvas

ctx.beginPath()

ctx.arc(110, 113, 105, 0, Math.PI);

ctx.lineWidth = 10;

ctx.strokeStyle = '#000';

ctx.rotate(2); // < — perevorachivaet, there is clearly need something else to add...

ctx.stroke();

ctx.closePath();

}
by | 8 views

5 Answers

0 like 0 dislike
In a topic that you have given above is a whole paragraph about it:
\r
If we want to rotate some object, e.g. a picture, you must correctly interact methods rotate and translate, otherwise we will never get the picture to the right place. The easiest way axis of rotation to select the center of the picture and render it in the coordinates (-width/2, -height/2). For example, we want to expand the picture size 50x50, located at coordinates 100:100. Referred to translate the coordinate 125:125 and draw the picture in the coordinate -25:-25. The alternative is to use LibCanvas and method rotatedImage(or drawImage in the near future) and not to strain.

\r
With the help of LibCanvas, which you can download from GitHub it will look something like this:
\r
canvas .getContext('2d-libcanvas') .drawImage({ image: yourCanvas, from : [15, 40], angle: (60).degree() }); 

\r
If you use the extension Number.prototype.degree of a topic, then your code might look like this:
\r
rotatedDrawImage function (ctx, image, fromX, fromY, angle) { ctx.save(); ctx.translate(fromX + image.width / 2, fromY + image.height / 2); ctx.rotate(angle.degree()); ctx.translate(-(fromX + image.width / 2), -(fromY + image.height / 2)); ctx.drawImage(image, fromX, fromY); ctx.restore(); } rotatedDrawImage(canvas.getContext('2d'), yourCanvas, 15, 40, 60); 
by
0 like 0 dislike
If I just do context.rotate(0.05) then the image begins to move down for some strange trajectory.

It revolves around the point 0:0
by
0 like 0 dislike
One of the options there is a "Canvas transformation accessible language"
by
0 like 0 dislike
What do you mean moving out? To turn all displays as it should?
The angle from which the rotate() do think so: 60 degrees = Math.PI / 3?
by
0 like 0 dislike
And again. The rotate function takes the angle in radians to degrees yuzayte deg / 180 * Math.PI.
by

Related questions

0 like 0 dislike
1 answer
asked Jun 9, 2019 by bogdan_uman
0 like 0 dislike
2 answers
0 like 0 dislike
3 answers
0 like 0 dislike
2 answers
0 like 0 dislike
1 answer
110,608 questions
257,186 answers
0 comments
28,887 users