Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use Canvas API to operate graphics rotation", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to use Canvas API to operate graphics rotation"!

About the center rotation of an object

For the first type of rotation, we want to see that it rotates an object to its center. The implementation uses canvas elements, which is the simplest type of rotation. We experimented with a picture of a gorilla as material.

The basic idea is that we should rotate the canvas according to a central point, rotate the canvas, and then return the canvas to its original position. If you have some experience with graphics engines, this should sound familiar. The code looks something like this: (click to see the effect)

JavaScript Code copies content to the 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'

}

The comments are already very detailed, but I still want to mention one point: .save () and .restore (). Their role is to save the canvas before rotation, and then rotate and restore. It is critical to effectively avoid conflicts with other renderings, and many friends do not rotate smoothly, mostly for this reason.

Rotate around a point

The second type is that the image rotates around a point in space, which becomes more complex. But why would you do that? In many cases, you need to rotate the object with reference to another object, and a single rotation around the center cannot meet the demand. And the latter will be more commonly used, such as in web games, rotation is often used.

JavaScript Code copies content to the 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, 5, 0, 0, Math.PItem2, false)

Ctx2.closePath ()

Ctx2.fillStyle = 'rgba (0.255pr 00.25pl)'

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'

}

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

Draw magic Logo

This is in du Niang saw a logo, clever use of rotation transformation, with a very simple rectangle, through rotation transformation, into a very beautiful logo. Isn't this logo very magic? Children's shoes use their brains to try to achieve it. Next, provide me with the code to implement it.

JavaScript Code copies content to the clipboard

Draw magic Logo

Body {background: url (". / images/bg3.jpg") repeat;}

# canvas {border: 1px solid # aaaaaa; display: block; margin: 50px auto;}

I can't believe your browser doesn't support Canvasations! Hurry up and change it!

_ window.onload = function () {

Var canvas = document.getElementById ("canvas")

Canvas.width = 800,

Canvas.height = 600,

Var context = canvas.getContext ("2d")

Context.fillStyle = "# FFF"

Context.fillRect (0Pol 0800600)

For (var iTunes 1; I

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.