<!--
/*************************************************************
* 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 style='padding-left: 420px;'>You can draw by clicking and moving mouse on this canvas and it will render as favicon of this website.</p>
<canvas id='canvas' width='400px' height='400px' style='border: 1px solid black; position: absolute; top: 10px; left: 10px;'></canvas>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="./canvicon.jquery.js" ></script>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.lineWidth = 5;
var draw = false;
var last = new Object();
last.x = -1;
last.y = -1;
canvas.onmousedown = function(){
draw = true;
};
canvas.onmouseup = function(){
draw = false;
last.x = -1;
last.y = -1;
};
canvas.onmousemove = function(e){
if(draw)
{
if(last.x >= 0 && last.y >= 0)
{
ctx.beginPath();
ctx.moveTo(last.x, last.y);
ctx.lineTo(e.clientX-10, e.clientY-10);
ctx.stroke();
}
last.x = e.clientX-10;
last.y = e.clientY-10;
$("#canvas").canvicon();
}
}
</script>
</body>
</html> |
Stumble It!
Bookmark in del.icio.us
Download
