Image Changing With Rotating Canvas in HTML5

Ashwani Tyagi
11y
7.8k
0
1

Article

Automatic Image Changing in Rotating Canvas in HTML5

Introduction

In this article I describe how to change images while rotating the canvas in HTML5.

In this article we simply placed birds on the canvas, then move the canvas using a stylesheet to allow the birds to roam across the page.

Browser Support

It is supported by all major browsers such as Internet Explorer 9, Firefox 3.6+, Safari 4+ and Chrome etc.

Procedure for changing the image in a canvas during rotation

Step 1

We first define the element using a HTML5 canvas. The height and width attributes sets the canvas width and height. To add the position use the style attribute.

Step 2

In order to interact with this canvas through JavaScript, we will need to first get the element by Id and then create a context.

var can = document.getElementById('can');

var ctx = can.getContext("2d");

</script>

In the beginning of the script tag we declare some variables as:

var can, ctx,

arr = [],

counter = 0, rot = 0,

centerX = -170, centerY = -125,

canX = 20, canY = 225;

Step 3

In the following method we first create a draw() method. In this we will first define a clearRect() method. The clearRect() method clears the specified pixels. Since the Canvas has the states translate and rotate, the save() method and restore() method are called in order to save and restore the canvas states.

Canvas states are stored in a stack whenever the save() method is called, and the last saved state is poped up from the stack whenever the restore() method is called. In this we draw rotated: translate to x,y; rotate; draw at 0,0, offset to center.

function draw()

{

ctx.clearRect(0, 0, can.width, can.height);

ctx.save();

ctx.translate(can.width / 2, can.height / 2);

ctx.rotate(rot);

ctx.drawImage(arr[counter], centerX, centerY);

ctx.restore();

}

Step 4

In the following code we will create a move() method for moving the canvas on the page. In this step we use the CSS style for moving the canvas.

function move()

{

canX += 1;

canY -= 2;

if (canY < -60)

canY = -60;

if (canX > 450)

canX = 450;

can.style.left = canX;

can.style.top = canY;

}

Above the CSS style that I have used to move the canvas is:

can.style.left = canX;

can.style.top = canY;

Step 5

In the following code we will create a twinkle() method. In this method the images blink quickly. We will check the value of the counter by applying an if condition. In this condition if(counter==4) then make the counter to zero and apply rotation(rot=.06). After that call the draw() method for drawing the birds, move() method for moving the canvas and the setTimeout() method for repeating continuously.

function twinkle()

{

var wait = 500;

counter++;

if (counter == 4)

{

counter = 0;

wait += Math.random() * 1500;

rot += .06;

}

draw();

move();

setTimeout(twinkle, wait);

}

Step 6

Now will will create the init() method. In this method we will put the images into an array. We will also set the shadow color, Offset and blur for these images. Then we will call the draw() method to draw on the fly. Then we will wait for a few seconds and after that we begin the animation.

function init()

{

can = document.getElementById("can");

ctx = can.getContext("2d");

arr[0] = document.getElementById("a1");

arr[1] = document.getElementById("a2");

arr[2] = document.getElementById("a3");

arr[3] = document.getElementById("a4");

ctx.shadowColor = "rgba(60, 60, 60, .4)";

ctx.shadowBlur = "6";

ctx.shadowOffsetX = "20";

ctx.shadowYOffsetY = "30";

draw();

var t = setTimeout(twinkle, 5000);

}

Step 7

In the following code inside the body tag onload we will call the init() method. We also define the image source inside a body tag.

</body>

Example

<!DOCTYPE html>

<head>

<title>Free Roaming Canvas</title>

var can, ctx,

arr = [],

counter = 0, rot = 0,

centerX = -170, centerY = -125,

canX = 20, canY = 225;

function init()

{

can = document.getElementById("can");

ctx = can.getContext("2d");

arr[0] = document.getElementById("a1");

arr[1] = document.getElementById("a2");

arr[2] = document.getElementById("a3");

arr[3] = document.getElementById("a4");

ctx.shadowColor = "rgba(60, 60, 60, .4)";

ctx.shadowBlur = "6";

ctx.shadowOffsetX = "20";

ctx.shadowYOffsetY = "30";

draw();

var t = setTimeout(twinkle, 5000);

}

function twinkle()

{

var wait = 500;

counter++;

if (counter == 4)

{

counter = 0;

wait += Math.random() * 1500;

rot += .06;

}

draw();

move();

setTimeout(twinkle, wait);

}

function draw()

{

ctx.clearRect(0, 0, can.width, can.height);

ctx.save();

ctx.translate(can.width / 2, can.height / 2);

ctx.rotate(rot);

ctx.drawImage(arr[counter], centerX, centerY);

ctx.restore();

}

function move()

{

canX += 1;

canY -= 2;

if (canY < -60)

canY = -60;

if (canX > 450)

canX = 450;

can.style.left = canX;

can.style.top = canY;

}

</script>

</head>

</body>

</html>

Output

Automatic Image changing in Rotation Canvas on the page

Image 1

Image 2

Image 3

Image 4

Up Next

Ebook Download

View all

New Layout Design using HTML and CSS

Read by 1 people

Download Now!

Learn

View all