{"id":2355,"date":"2011-10-09T19:16:13","date_gmt":"2011-10-10T00:16:13","guid":{"rendered":"http:\/\/www.lonhosford.com\/lonblog\/?p=2355"},"modified":"2015-07-31T18:25:49","modified_gmt":"2015-07-31T23:25:49","slug":"html5-canvas-circular-rotation-animation","status":"publish","type":"post","link":"https:\/\/www.lonhosford.com\/lonblog\/2011\/10\/09\/html5-canvas-circular-rotation-animation\/","title":{"rendered":"HTML5 Canvas Circular Rotation Animation Example"},"content":{"rendered":"

Started dabbling with the HTML5 canvas to create animations. This example animates a filled circle rotating around the center point. \"\" I kept the example as simple as possible while anticipating some of the coding design required for a more complex build.<\/p>\n

A build on this example that accepts user keyboard input to control the animation play, start, stop, direction and speed is available in this follow up post<\/a>.

<\/a>\"\"Foundation HTML5 Animation with JavaScript<\/a>\"\"
\n
Learn More<\/figcaption><\/figure><\/p>\n

One item that is more sophisticated is that the canvas tag is dynamically created in the Javascript code on lines 35 – 40. This is not necessary as the tag could be inserted into the html and referenced with an id. <\/p>\n

Another is including JQuery from the Google CDN. Listening to the body onLoad method is a substitute. <\/p>\n

Also I included the script tag after the html content. The script tag could go in the head section. Placing after the html in the body tag allows html content to load and style before the script code is parsed.<\/p>\n

Demo<\/a><\/strong><\/p>\n

Source<\/a><\/strong><\/p>\n

This is the html5 head section. There is an internal style on lines 8 – 17 for the html in the document. Line 4 brings in JQuery from the Google CDN. Line 20 is the display title for the page.<\/p>\n

\r\n<!DOCTYPE HTML>\r\n<html>\r\n<head>\r\n<script language="javascript" src="https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.6.4\/jquery.min.js" type="text\/javascript"><\/script>\r\n<title>HTML5 Canvas Circular Movement Based Animation<\/title>\r\n<meta charset="UTF-8">\r\n<title>Untitled Document<\/title>\r\n<style type="text\/css">\r\n\tbody {\r\n\t\tfont-family:Arial, Helvetica, sans-serif;\r\n\t\tfont-size:12px;\r\n\t}\r\n\t#titleDiv{\r\n\t\tfont-family:Verdana, Geneva, sans-serif;\r\n\t\tfont-size:16px;\r\n\t}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div id="titleDiv">HTML5 Canvas Circular Movement Based Animation<\/div>\r\n<script type='text\/javascript'>\r\n<\/pre>\n
The animation key variables are definite and initialized here to keep as many bare numbers out of the code as possible. <\/p>\n
The canvas has a border. So there is some computational needs on lines 26-27 to take the border out in computing the center point. May not make a difference in this example, but is helpful for a future example where that boundary is important.<\/p>\n
\r\n\tvar CANVAS_WIDTH = 480;\t\t\/\/ Canvas width\r\n\tvar CANVAS_HEIGHT = 480;\t\/\/ Canvas height\r\n\tvar FPS = 30;\t\t\t\t\/\/ Frames per second\r\n\t\/\/ Canvas center points adjusting for stroke.\r\n\tvar canvasCenterX = (CANVAS_WIDTH - 1) \/ 2;\r\n\tvar canvasCenterY = (CANVAS_HEIGHT - 1) \/ 2;\r\n\t\/\/ Radius of the rotation\r\n\tvar radius = 200;\r\n\t\/\/ Speed of movement\r\n\tvar speed = .05;\r\n\t\/\/ Angle for computing cosine and sin.\r\n\tvar angle = 0;\r\n\t\/\/ Create a canvas element variable.\r\n\tvar canvasElement = $("<canvas width='" + CANVAS_WIDTH + \r\n\t  "' height='" + CANVAS_HEIGHT + "'><\/canvas");\r\n\t\/\/ Reference to the canvas 2d context.\r\n\tvar canvas = canvasElement.get(0).getContext("2d");\r\n\t\/\/ Dynamically append a canvas element to the body tag.\r\n\tcanvasElement.appendTo('body');\r\n<\/pre>\n
[ad name=”Google Adsense”]
\nThis defines the object that moves in the circular rotation. The name player is arbitrary but hints at a way to define objects for a game. <\/p>\n
Later we will see the animation loop. The animation loop call the draw function of the items in the animation. So you see the draw function for the player on line 49. This is how to draw a filled circle with a border using the html5 canvas api. <\/p>\n
Additionally each object has an init function that is called to initialize the animation objects. For this example the init function for the player object is empty. It could be used for an initial placement of an object for example.<\/p>\n
Line 59 shows the master init function that would call all necessary component init functions.<\/p>\n
\r\n\t\r\n\t\/\/ Object defining the player we are rotating.\r\n\tvar player = {\r\n\t\tcolor: "#00A",\r\n\t\tx: 0,  \t\/\/ Starting x\r\n\t\ty: 0,\t\/\/ Starting y\r\n\t\twidth: 32,\r\n\t\theight: 32,\r\n\t\tradius: 20,\r\n\t\tdraw: function() \/\/ Draw the player.\r\n\t\t{\r\n\t\t\tcanvas.fillStyle = this.color;\t\t\r\n\t\t\tcanvas.beginPath();  \r\n\t\t\tcanvas.arc(this.x,this.y,this.radius,0,Math.PI*2,true); \r\n\t\t\tcanvas.fill();\r\n\t\t\tcanvas.lineWidth = 5;\r\n    \t\t        canvas.strokeStyle = "black";\r\n    \t\t        canvas.stroke();\r\n\t  \t},\r\n\t\tinit: function()\r\n\t\t{\r\n\t\t}\r\n\t};\t\r\n\t\/\/ Initialize game\r\n\tfunction init()\r\n\t{\r\n\t\tplayer.init();\r\n\t}\r\n<\/pre>\n
[ad name=”Google Adsense”]
\nThe update function updates the model data. The animation timer will call this for each animation interval. <\/p>\n
Primarily the computations are a right triangle from the center point to the place for the player object to be drawn based on the current angle. This is the x and y where the leg and hypotenuse are based on the angle.<\/p>\n
\r\n\t\/\/ Update the model data.\r\n\tfunction update() \r\n\t{  \r\n\t\t\/\/ Compute the triangle coordinates from the center of rotation\r\n\t\tplayer.x = canvasCenterX + Math.cos(angle) * radius;\r\n\t\tplayer.y = canvasCenterY + Math.sin(angle) * radius;\r\n\t\t\/\/ Keep moving the rotation. Use -= for reverse rotation.\r\n\t\tangle += speed;\r\n\t}\r\n\r\n<\/pre>\n
This is the view being drawn. It draws anything that has to do with the overall canvas. However you could make that a class or object like player and give it a draw method. <\/p>\n
Line 85 shows the player draw method being called.<\/p>\n
\r\n\t\/\/ Draw the views\r\n\tfunction draw() \r\n\t{\r\n\t\tcanvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);\r\n\t\tcanvas.strokeStyle = "red";\r\n\t\tcanvas.strokeRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);\r\n\t\tcanvas.fillStyle = "#ccc";\r\n\t\tcanvas.fillRect(.5, .5, CANVAS_WIDTH-1, CANVAS_HEIGHT-1);\r\n\t\tplayer.draw();\r\n\t}\r\n<\/pre>\n
[ad name=”Google Adsense”]
\nThis is the start of the script and the heart of the animation. Once JQuery is ready the animation init function is called. Next a Javascript interval is started to call the animation update method to update the data and then the animation draw method to redraw the view.<\/p>\n
\r\n\t\/\/ JQuery ready\r\n\t$(function() \r\n\t{\r\n\t\t\/\/ Start here.\r\n\t\tinit();\r\n\t\t\/\/ Timer for animation.\r\n\t\tsetInterval(function() \r\n\t\t{\r\n\t\t\tupdate();\r\n\t\t\tdraw();\r\n\t\t}, 1000\/FPS);\r\n\t\t\t\r\n\t});\r\n\r\n<\/pre>\n
\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n<\/pre>\n
<\/div>\n