很早就有一个想用js+canvas做一个动态logo的想法，闲暇之余按照自己所所想的样子做出来了，雏形，比较糙，用到了javascript+canvas+svg。
线条的动画用到了svg，通过代码可以看到是path（路径）构成的。
在加上简单的jq来实现动画：
通过js+canvas创建画布，加载图片，添加hover、click事件：
//获取Canvas对象(画布)
var canvas = document.getElementById("qietulogo");
//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
if(canvas.getContext){
//获取对应的CanvasRenderingContext2D对象(画笔)
var ctx = canvas.getContext("2d");
//创建新的图片对象
var img = new Image();
//指定图片的URL
img.src = "logo@2x.jpg";
//浏览器加载图片完毕后再绘制图片
img.onload = function(){
/*
* 将图像左侧的"Goo"部分(即以坐标(0,0)为左上角坐标、宽度为332px、高度为190px的部分图像)
* 绘制到canvas中以坐标(10,10)为左上角、宽度为332px、高度为190px的矩形区域
*
* canvas绘制图像的目标区域的宽度和高度与截取的部分图像尺寸保持一致，
* 就表示不进行缩放，以原始尺寸截取部分图像
*/
ctx.drawImage(img, 0, 0, 150, 80, 0, 0, 150, 80);
};
function draw(x,y){
ctx.drawImage(img,0,y,150,80,0,0,150,80);
}
var img_x = 0;
var img_y = 0;
var speed = 10;
function update(){
ctx.clearRect(0,0,150,80);
if(img_y > 80 || img_y < 0){
speed=-speed;
}
img_y+=speed;
draw(img_x,img_y);
}
//setInterval(update,100);
var speed = 0;
var a;
var b;
canvas.onmouseover=function(){
clearInterval(b);
a = setInterval(function(){
//console.log(speed);
if(speed<80){
speed++;
ctx.drawImage(img,0,speed,150,80,0,0,150,80);
}
else{
clearInterval(a);
}
},1);
}
canvas.onmouseout=function(){
clearInterval(a);
b = setInterval(function(){
//console.log(speed);
if(speed>0){
speed--;
ctx.drawImage(img,0,speed,150,80,0,0,150,80);
}
else{
clearInterval(b);
}
},1);
}
canvas.onclick =function(){
window.location.href="http://www.qietu.com";
}
}
演示地址：
http://www.qietu.com/labs/canvaslogo/
关注微信：
qietuwang