腾讯微博LOGO实例

1. 基于HTML5的canvas实例分享
基于HTML5 canvas实例分享
HTML5的
jellyzhang
2011.03.28

2. 目录
• 效果预览
• CANVAS元素简介
• 渐变背景实现原理解析
• 模拟蒲公英（径向渐变）实现原理解析
• 腾讯微博logo实现原理解析
• 动画实现原理解析和方法讨论
• 设计思路和方法探讨
• 总结

3. CANVAS元素简介
• 什么是Canvas？ Canvas能干什么?
– 当你听到Canvas的时候，你的第一反应应该是会想到HTML5的
新元素。技术上来说，这只是一部分，从现在开始，我们先忘记
那个吧。Canvas元素是浏览器新技术对外的一个窗口。
– 万能的Canvas 。
绘制图形、使用图像、应用风格和颜色、变型、组合、基本动画。

4. CANVAS元素简介
• 浏览器的支持
4

5. 渐变背景实现原理解析
• var cxt=document.getElementById("myCanvas").getContext("2d");
• function gradientsBg() {
• //清空画布
• cxt.clearRect(0,0,800,600);
• //创建纵向渐变对象
• var lingrad = cxt.createLinearGradient(0,0,0,600);
• //添加色标
• lingrad.addColorStop(0, '#65B7E7');
• lingrad.addColorStop(0.7, '#D7E7F7');
• lingrad.addColorStop(1, '#A7BD36');
• cxt.fillStyle = lingrad;
• cxt.fillRect(0,0,800,600);
• }

6. 模拟蒲公英（径向渐变）实现原理解析
• 径向渐变圆的实现
• function gradientsRadial() {
• //创建径向渐变对象
• var lingrad = cxt.createRadialGradient(600,400,1,600,400,30);
• lingrad.addColorStop(0, '#ffffff');
• lingrad.addColorStop(1, 'rgba(255,255,255,0)');
• cxt.fillStyle = lingrad;
• cxt.arc(600, 400, 28, 0, 360);
• cxt.fill();
• }

7. 偏心径向渐变的实现原理解析
• function gradientsRadial3() {
• var lingrad = cxt.createRadialGradient(5,5,10,45,45,120);
• lingrad.addColorStop(0, '#ffffff');
• lingrad.addColorStop(1, 'rgba(255,255,255,0)');
• cxt.fillStyle = lingrad;
• cxt.arc(45, 45, 120, 0, 360);
• cxt.fill();
• //cxt.clearRect(0, 0, 120, 120);
• }

8. 模拟蒲公英（径向渐变）实现原理解析
• 画弧线（二次方曲线以及贝塞尔曲线 ）
• function gradientsCurves () {
• var lingrad2 = cxt.createLinearGradient(600,400,570,430);
• lingrad2.addColorStop(0, '#ffffff');
• lingrad2.addColorStop(0.3, '#ffffff');
• lingrad2.addColorStop(1, '#8FC62C');
• cxt.strokeStyle = lingrad2;
• cxt.lineWidth=2.5;
• cxt.lineCap="round";
• cxt.beginPath(); bezierCurveTo
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
• //cxt1.closePath(); (cp1x, cp1y),(cp2x,cp2y)是曲线的控制点（红点）
• cxt.moveTo(600,400); ，(x,y)是曲线的终点
• cxt.quadraticCurveTo(605,435,585,450);
• cxt.stroke();
• }

9. 腾讯微博logo实现原理解析
• function microblogLogoBig() {
• cxt.strokeStyle="#ffffff";
• cxt.lineCap="round";
• cxt.lineWidth=9;
• cxt.shadowOffsetX = 0;
• cxt.shadowOffsetY = 0;
• cxt.shadowBlur = 0;
• cxt.shadowColor = 'rgba(236, 246, 193, 0.6)';
• cxt.beginPath();
• cxt.arc(90,118,47,Math.PI/180*110,Math.PI/180*150,true);
• cxt.stroke();
• //cxt.closePath();
•

10. 腾讯微博logo实现原理解析
• cxt.beginPath();
• cxt.moveTo(90,118);
• var lingrad = cxt.createLinearGradient(90,118,48,224);
• lingrad.addColorStop(0, '#ffffff');
• lingrad.addColorStop(0.3, '#ffffff');
• lingrad.addColorStop(1, '#8FC62C');
• cxt.strokeStyle = lingrad;
• cxt.quadraticCurveTo(42, 157, 48, 224);
• cxt.stroke();
• cxt.beginPath();
• cxt.fillStyle="#ffffff";
• cxt.arc(90,118,17,0,Math.PI*2,true);
• cxt.fill();
• }

11. 腾讯微博logo实现原理解析之使用图像
• function draw() {
• var img = new Image();
• img.onload=function(){
• cxt.drawImage(img,220,45);
• }
• img.src =
'http://mat1.gtimg.com/microblog/images/test/microbloglogo.
png';
• }

12. 动画实现原理解析和方法讨论
• //定时器
var
• var interval=null;
direction=Math.round(Math.random()*360);
• //停止动画
this.downspeed=Math.cos(direction)*Math.r
• function stop(){clearInterval(interval);}
ound(Math.random()*5);
• //圆的构造函数
• function Circle(color,x,y,radius){
this.rightspeed=Math.sin(direction)*Math.ro
• this.color=color;
und(Math.random()*5);
• this.x=x;
• }
• this.y=y;
• this.radius=radius;
• //三十帧
• this.fps=30;
• //每一帧的延迟时间
• this.delay=1000/this.fps;
• //上一次重绘的时间
• this.last_update=0;
•

13. 动画实现原理解析和方法讨论
//圆更新 If
Circle.prototype.update=function(c
(this.x<=this.radius||this.x>=maxW-
anvas){
this.radius)
//获取当前时间
{
var now=(new Date()).getTime();
this.rightspeed=-1*this.rightspeed;
var maxW =
}
canvas.getAttribute("width");
if
var maxH =
(this.y<=this.radius||this.y>=maxH-
canvas.getAttribute("height")
this.radius)
//如果达到了延迟时间，则更新数据
{
if((now-this.last_update)>this.delay){
this.downspeed=-1*this.downspeed;
this.x+=this.rightspeed;
}
this.y+=this.downspeed;
//记下最新一次绘制时间
this.last_update=now;
}
}

14. 动画实现原理解析和方法讨论
function move_Circle2(){ var Circles=[];
//停止动画 Circles[0]= new
stop(); Circle("rgba("+Math.round(255*Math.random
//画布对象 ())+", "+Math.round(255*Math.random())+",
var "+Math.round(255*Math.random())+")",Math.
canvas=document.getElemen round(600*Math.random()),Math.round(300*
tById("myCanvas2")
Math.random()),12);
//获取上下文对象
Circles[1]= new
var cxt1
Circle("rgb("+Math.round(255*Math.random())
=canvas.getContext("2d");
+", "+Math.round(255*Math.random())+",
//创建多个方块对象
"+Math.round(255*Math.random())+")",Math.
var Circles=[];
round(600*Math.random()),Math.round(300*
Math.random()),14);
.
.
.

15. 动画实现原理解析和方法讨论
//开始动画绘制
interval = setInterval(function(){
for(var i=0;i<Circles.length;i++){
//取出一个圆
var circle=Circles[i];
//清空上一个圆的
cxt1.clearRect((circle.x-circle.radius-10),(circle.y-circle.radius-
10),(circle.y+circle.radius+20),(circle.y+circle.radius+20));
//cxt1.clearRect(0,0,800,600) //更新数据
circle.update(canvas);
//保存状态
cxt1.save();
//设置颜色
//cxt1.fillStyle=circle.color;

16. 动画实现原理解析和方法讨论
• //径向渐变
• var lingrad =
cxt1.createRadialGradient(circle.x,circle.y,1,circle.x,circle.y,
circle.radius);
• lingrad.addColorStop(0, '#ffffff');
• lingrad.addColorStop(1,
'rgba(255,255,255,0)');
• cxt1.fillStyle = lingrad;
•
cxt1.arc(circle.x,circle.y,circle.radius,0,Math.PI*2,true);
• cxt1.fill();

17. 动画实现原理解析和方法讨论
//弧线
var lingrad2 = cxt1.createLinearGradient(circle.x,circle.y,circle.x+20,circle.y+20);
lingrad2.addColorStop(0, '#ffffff');
lingrad2.addColorStop(0.3, '#ffffff');
lingrad2.addColorStop(1, '#8FC62C');
cxt1.strokeStyle = lingrad2;
cxt1.lineWidth=2;
cxt1.lineCap="round";
cxt1.beginPath();
cxt1.moveTo(circle.x,circle.y);
cxt1.quadraticCurveTo(circle.x+3,circle.y+20,circle.x+15,circle.y+30);
cxt1.stroke(); //恢复状态
cxt1.restore();
}
},100);//尽可能快的循环
}

18. 总结
• 革命尚未成功，我们仍需努力！
• 浏览器性能优化
• 设计思路和方法