Examples to explain how to use HTML5 Canvas API to operate graphics rotation

Examples to explain how to use HTML5 Canvas API to operate graphics rotation_html5 tutorial skills

WBOY

Release： 2016-05-16 15:45:24

Original

1930 people have browsed it

As a web developer, I have been working with the HTML5 canvas element. Rendering images is a big branch that is very important and commonly used. Therefore, today’s tutorial is about canvas image display and how to rotate images. Maybe it is a good thing you really want now.

In general, there are two ways to rotate canvas: center rotation and reference point rotation. Proficient application of the rotation function will be of great help to your development works.

About the center rotation of the object
The first type of rotation, we want to look at rotating an object about its center. Implemented using the canvas element, which is the simplest type of rotation. We used a picture of a gorilla as material for our experiment.
The basic idea is that we need to rotate the canvas around a center point, rotate the canvas, and then return the canvas to its original position. If you have some experience with graphics engines, then this should sound familiar. The code is probably like this: (Click to see the effect)

JavaScript CodeCopy content to clipboard

function onload() {
var canvas = document.getElementById('c1');
var ctx1 = canvas.getContext('2d');
var image1 = new Image();
image1.onload = function() {
// regular rotation about center
var xpos = canvas.width/2;
var ypos = canvas.height/2;
ctx1.drawImage(image1, xpos - image1.width / 2, ypos - image1.height / 2);
ctx1.save();
ctx1.translate(xpos, ypos);
ctx1.rotate(47 * Math.PI / 180);//Rotate 47 degrees
ctx1.translate(-xpos, -ypos);
ctx1.drawImage(image1, xpos - image1.width / 2, ypos - image1.height / 2);
ctx1.restore();
}
image1.src = 'image.png';
}

2016322114126609.gif (383×384)

The comments are already very detailed, but I still want to mention one thing: .save() and .restore(). Their purpose is to save the canvas as it was before the rotation and then restore it after the rotation. It is very important to effectively avoid conflicts with other renderings. Many friends have not been able to rotate smoothly, mostly due to this reason.

Rotate around a certain point
The second type is to rotate the image around a certain point in space, which will become more complicated. But why do this? In many cases, you need to rotate an object with reference to another object, and a single rotation around the center cannot meet the needs. And the latter is more commonly used. For example, in web games, rotation is often used.

2016322114156905.jpg (422×253)
JavaScript CodeCopy content to clipboard

function onload() {
var canvas2 = document.getElementById('c2');
var ctx2 = canvas2.getContext('2d');
// regular rotation about point
var image2 = new Image();
image2.onload = function() {
// regular rotation about a point
var angle = 120 * Math.PI / 180; // angle of rotation in radians
var rx = 300, ry = 200; // the rotation x and y
var px = 300, py = 50; // the objects center x and y
var radius = ry - py; // the difference in y positions or the radius
var dx = rx radius * Math.sin(angle); // the draw x
var dy = ry - radius * Math.cos(angle); // the draw y
ctx2.drawImage(image2, 300 - image2.width / 2, 50 - image2.height / 2);
ctx2.beginPath();
ctx2.arc(300,200,5,0,Math.PI*2,false);
ctx2.closePath();
ctx2.fillStyle = 'rgba(0,255,0,0.25)';
ctx2.fill();
ctx2.save();
ctx2.translate(dx, dy);
ctx2.rotate(angle);
ctx2.translate(-dx, -dy);
ctx2.drawImage(image2, dx - image2.width / 2, dy - image2.height / 2);
ctx2.restore();
}
image2.src = 'smallimage.png';
}

2016322114243019.gif (614×416)

The code is simple, and its function is to rotate a picture 120 degrees according to a point, making the picture more vivid.

Drawing a magical logo
This is a logo I saw on Du Niang. I cleverly used rotation transformation. I used a very simple rectangle and transformed it into a very beautiful logo through rotation transformation. . Isn’t this logo very magical? Children's shoes use their brains and try to realize it. Below, provide the code I used to implement it.

JavaScript CodeCopy content to clipboard