Here is Canvas Animation : Clear Canvas, Canvas Animation with requestAnimFrame, Canvas Linear Motion Animation, Canvas Acceleration, Canvas Oscillation Animation, Canvas Start and Stop an Animation.
Clear Canvas
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } #buttons { position: absolute; top: 5px; left: 10px; } #buttons > input { padding: 10px; display: block; margin-top: 5px; } </style> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> <div id="buttons"> <input type="button" id="clear" value="Clear"> </div> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // begin custom shape context.beginPath(); context.moveTo(170, 80); context.bezierCurveTo(130, 100, 130, 150, 230, 150); context.bezierCurveTo(250, 180, 320, 180, 340, 150); context.bezierCurveTo(420, 150, 420, 120, 390, 100); context.bezierCurveTo(430, 40, 370, 30, 340, 50); context.bezierCurveTo(320, 5, 250, 20, 250, 50); context.bezierCurveTo(200, 5, 150, 20, 170, 80); // complete custom shape context.closePath(); context.lineWidth = 5; context.strokeStyle = 'blue'; context.stroke(); context.fillStyle = 'yellow'; context.fill(); // bind event handler to clear button document.getElementById('clear').addEventListener('click', function() { context.clearRect(0, 0, canvas.width, canvas.height); }, false); </script> </body> </html> |
Result
Canvas Animation with requestAnimFrame
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> <script> window.requestAnimFrame = (function(callback) { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); function drawRectangle(myRectangle, context) { context.beginPath(); context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height); context.fillStyle = 'lightblue'; context.fill(); context.lineWidth = myRectangle.borderWidth; context.strokeStyle = 'blue'; context.stroke(); } function animate(myRectangle, canvas, context, startTime) { // update var time = (new Date()).getTime() - startTime; var linearSpeed = 100; // pixels / second var newX = linearSpeed * time / 1000; if(newX < canvas.width - myRectangle.width - myRectangle.borderWidth / 2) { myRectangle.x = newX; } // clear context.clearRect(0, 0, canvas.width, canvas.height); drawRectangle(myRectangle, context); // request new frame requestAnimFrame(function() { animate(myRectangle, canvas, context, startTime); }); } var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var myRectangle = { x: 0, y: 75, width: 100, height: 100, borderWidth: 1 }; drawRectangle(myRectangle, context); // wait one second before starting animation setTimeout(function() { var startTime = (new Date()).getTime(); animate(myRectangle, canvas, context, startTime); }, 1000); </script> </body> </html> |
Result
Canvas Linear Motion Animation
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> <script> window.requestAnimFrame = (function(callback) { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); function drawRectangle(myRectangle, context) { context.beginPath(); context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height); context.fillStyle = 'lightblue'; context.fill(); context.lineWidth = myRectangle.borderWidth; context.strokeStyle = 'blue'; context.stroke(); } function animate(myRectangle, canvas, context, startTime) { // update var time = (new Date()).getTime() - startTime; var linearSpeed = 100; // pixels / second var newX = linearSpeed * time / 1000; if(newX < canvas.width - myRectangle.width - myRectangle.borderWidth / 2) { myRectangle.x = newX; } // clear context.clearRect(0, 0, canvas.width, canvas.height); drawRectangle(myRectangle, context); // request new frame requestAnimFrame(function() { animate(myRectangle, canvas, context, startTime); }); } var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var myRectangle = { x: 0, y: 75, width: 100, height: 100, borderWidth: 1 }; drawRectangle(myRectangle, context); // wait one second before starting animation setTimeout(function() { var startTime = (new Date()).getTime(); animate(myRectangle, canvas, context, startTime); }, 1000); </script> </body> </html> |
Result
Canvas Acceleration
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> <script> window.requestAnimFrame = (function(callback) { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); function drawRectangle(myRectangle, context) { context.beginPath(); context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height); context.fillStyle = 'lightblue'; context.fill(); context.lineWidth = myRectangle.borderWidth; context.strokeStyle = 'blue'; context.stroke(); } function animate(myRectangle, canvas, context, startTime) { // update var time = (new Date()).getTime() - startTime; // pixels / second^2 var gravity = 200; myRectangle.y = 0.5 * gravity * Math.pow(time / 1000, 2); if(myRectangle.y > canvas.height - myRectangle.height - myRectangle.borderWidth / 2) { myRectangle.y = canvas.height - myRectangle.height - myRectangle.borderWidth / 2; } lastTime = time; // clear context.clearRect(0, 0, canvas.width, canvas.height); // draw drawRectangle(myRectangle, context); // request new frame requestAnimFrame(function() { animate(myRectangle, canvas, context, startTime); }); } var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var myRectangle = { x: 239, y: 0, width: 100, height: 100, borderWidth: 1 }; drawRectangle(myRectangle, context); // wait one second before dropping rectangle setTimeout(function() { var startTime = (new Date()).getTime(); animate(myRectangle, canvas, context, startTime); }, 2000); </script> </body> </html> |
Result
Canvas Oscillation Animation
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> <script> window.requestAnimFrame = (function(callback) { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); function drawRectangle(myRectangle, context) { context.beginPath(); context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height); context.fillStyle = 'lightblue'; context.fill(); context.lineWidth = myRectangle.borderWidth; context.strokeStyle = 'blue'; context.stroke(); } function animate(myRectangle, canvas, context, startTime) { // update var time = (new Date()).getTime() - startTime; var amplitude = 150; // in ms var period = 2000; var centerX = canvas.width / 2 - myRectangle.width / 2; var nextX = amplitude * Math.sin(time * 2 * Math.PI / period) + centerX; myRectangle.x = nextX; // clear context.clearRect(0, 0, canvas.width, canvas.height); // draw drawRectangle(myRectangle, context); // request new frame requestAnimFrame(function() { animate(myRectangle, canvas, context, startTime); }); } var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var myRectangle = { x: 250, y: 70, width: 100, height: 100, borderWidth: 1 }; drawRectangle(myRectangle, context); // wait one second before starting animation setTimeout(function() { var startTime = (new Date()).getTime(); animate(myRectangle, canvas, context, startTime); }, 1000); </script> </body> </html> |
Result
Canvas Start and Stop an Animation
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> <script> window.requestAnimFrame = (function(callback) { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); function drawRect(myRectangle, context) { context.beginPath(); context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height); context.fillStyle = 'lightblue'; context.fill(); context.lineWidth = myRectangle.borderWidth; context.strokeStyle = 'blue'; context.stroke(); } function animate(lastTime, myRectangle, runAnimation, canvas, context) { if(runAnimation.value) { // update var time = (new Date()).getTime(); var timeDiff = time - lastTime; // pixels / second var linearSpeed = 100; var linearDistEachFrame = linearSpeed * timeDiff / 1000; var currentX = myRectangle.x; if(currentX < canvas.width - myRectangle.width - myRectangle.borderWidth / 2) { var newX = currentX + linearDistEachFrame; myRectangle.x = newX; } // clear context.clearRect(0, 0, canvas.width, canvas.height); // draw drawRect(myRectangle, context); // request new frame requestAnimFrame(function() { animate(time, myRectangle, runAnimation, canvas, context); }); } } var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var myRectangle = { x: 0, y: 75, width: 100, height: 100, borderWidth: 1 }; /* * define the runAnimation boolean as an obect * so that it can be modified by reference */ var runAnimation = { value: false }; // add click listener to canvas document.getElementById('myCanvas').addEventListener('click', function() { // flip flag runAnimation.value = !runAnimation.value; if(runAnimation.value) { var date = new Date(); var time = date.getTime(); animate(time, myRectangle, runAnimation, canvas, context); } }); drawRect(myRectangle, context); </script> </body> </html> |
Result
More Stories
Amazing html canvas examples
html5 capture image from camera
Canvas Element