基于HTML5的canvas实例分享

1,100 views

Published on

腾讯微博LOGO实例

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,100
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

基于HTML5的canvas实例分享

  1. 1. 基于HTML5的canvas实例分享基于HTML5 canvas实例分享 HTML5的 jellyzhang 2011.03.28
  2. 2. 目录• 效果预览• CANVAS元素简介• 渐变背景实现原理解析• 模拟蒲公英(径向渐变)实现原理解析• 腾讯微博logo实现原理解析• 动画实现原理解析和方法讨论• 设计思路和方法探讨• 总结
  3. 3. CANVAS元素简介 • 什么是Canvas? Canvas能干什么? – 当你听到Canvas的时候,你的第一反应应该是会想到HTML5的 新元素。技术上来说,这只是一部分,从现在开始,我们先忘记 那个吧。Canvas元素是浏览器新技术对外的一个窗口。 – 万能的Canvas 。 绘制图形、使用图像、应用风格和颜色、变型、组合、基本动画。
  4. 4. CANVAS元素简介 • 浏览器的支持 4
  5. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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]= newvar 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. 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. 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. 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. 18. 总结• 革命尚未成功,我们仍需努力!• 浏览器性能优化• 设计思路和方法

×