<!--
/*************************************************************
* This script is developed by Arturs Sosins aka ar2rsawseen, http://webcodingeasy.com
* Feel free to distribute and modify code, but keep reference to its creator
*
* Canvicon class provides a way to rendeer canvas as website's favicon.
* You can draw on canvas and update favicon, thus creating an animated favicon
*
* For more information, examples and online documentation visit:
* http://webcodingeasy.com/JS-classes/Animated-favicon-using-canvas
**************************************************************/
-->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Canvas is hidden in this page. By pushing "Draw random squares" random squares will be drawn on hidden canvas and rendered as favicon</p>
<canvas id='canvas' width='50px' height='50px' style='display: none;'></canvas>
<input type='button' value='Draw random squares' onclick='random_circle()'/>
<script type="text/javascript" src="./canvicon.packed.js" ></script>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var c = new canvicon("canvas");
function random_circle(){
var size = getRandomInt(5, 10);
var half = Math.round(size/2);
ctx.fillRect(getRandomInt(half, canvas.width - half), getRandomInt(half, canvas.width - half), size, size);
c.update();
}
//get random integer
var getRandomInt = function(min, max){
return Math.floor(Math.random() * (max - min + 1)) + min;
};
</script>
</body>
</html>
|
Download
