基于HTML5的canvas实例分享

基于基于基于基于HTML5HTML5HTML5HTML5的的的的canvascanvascanvascanvas实例分享实例分享实例分享实例分享

jellyzhang

2011.03.28

目录

• 效果预览

• CANVAS元素简介

• 渐变背景实现原理解析

• 模拟蒲公英（径向渐变）实现原理解析

• 腾讯微博logo实现原理解析

• 动画实现原理解析和方法讨论

• 设计思路和方法探讨

• 总结

CANVAS元素简介

• 什么是Canvas？ Canvas能干什么?

– 当你听到Canvas的时候，你的第一反应应该是会想到HTML5的新元素。技术上来说，这只是一部分，从现在开始，我们先忘记那个吧。Canvas元素是浏览器新技术对外的一个窗口。

– 万能的Canvas 。

绘制图形、使用图像、应用风格和颜色、变型、组合、基本动画。

4

CANVAS元素简介

• 浏览器的支持浏览器的支持浏览器的支持浏览器的支持

渐变背景实现原理解析

• 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);

• }

模拟蒲公英（径向渐变）实现原理解析

• 径向渐变圆的实现• 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.arc(600, 400, 28, 0, 360);

• cxt.fill();

• }

偏心径向渐变的实现原理解析

• function gradientsRadial3() {

• var lingrad = cxt.createRadialGradient(5,5,10,45,45,120);




• cxt.arc(45, 45, 120, 0, 360);

• cxt.fill();

• //cxt.clearRect(0, 0, 120, 120);

• }

模拟蒲公英（径向渐变）实现原理解析

• 画弧线（二次方曲线以及贝塞尔曲线画弧线（二次方曲线以及贝塞尔曲线画弧线（二次方曲线以及贝塞尔曲线画弧线（二次方曲线以及贝塞尔曲线））））

• 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();

• //cxt1.closePath();

• cxt.moveTo(600,400);

• cxt.quadraticCurveTo(605,435,585,450);

• cxt.stroke();

• }

bezierCurveTobezierCurveTobezierCurveTobezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

(cp1x, cp1y),(cp2x,cp2y)是曲线的控制点（红点）

，(x,y)是曲线的终点

腾讯微博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.arc(90,118,47,Math.PI/180*110,Math.PI/180*150,true);

• cxt.stroke();

• //cxt.closePath();

•

腾讯微博logo实现原理解析


• cxt.moveTo(90,118);

• var lingrad = cxt.createLinearGradient(90,118,48,224);


• lingrad.addColorStop(0.3, '#ffffff');

• lingrad.addColorStop(1, '#8FC62C');

• cxt.strokeStyle = lingrad;

• cxt.quadraticCurveTo(42, 157, 48, 224);

• cxt.stroke();


• cxt.fillStyle="#ffffff";

• cxt.arc(90,118,17,0,Math.PI*2,true);

• cxt.fill();

• }

腾讯微博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';

• }

动画实现原理解析和方法讨论• //定时器

• var interval=null;

• //停止动画

• function stop(){clearInterval(interval);}

• //圆的构造函数

• function Circle(color,x,y,radius){

• this.color=color;

• this.x=x;

• this.y=y;

• this.radius=radius;

• //三十帧

• this.fps=30;

• //每一帧的延迟时间

• this.delay=1000/this.fps;

• //上一次重绘的时间

• this.last_update=0;

•

var direction=Math.round(Math.random()*360); this.downspeed=Math.cos(direction)*Math.round(Math.random()*5);

this.rightspeed=Math.sin(direction)*Math.round(Math.random()*5);

• }

动画实现原理解析和方法讨论 //圆更新

Circle.prototype.update=function(canvas){

//获取当前时间

var now=(new Date()).getTime();

var maxW = canvas.getAttribute("width");

var maxH = canvas.getAttribute("height")

//如果达到了延迟时间，则更新数据

if((now-this.last_update)>this.delay){

this.x+=this.rightspeed;

this.y+=this.downspeed;

If

(this.x<=this.radius||this.x>=maxW-this.radius)

{

this.rightspeed=-1*this.rightspeed;

}

if

(this.y<=this.radius||this.y>=maxH-this.radius)

{

this.downspeed=-1*this.downspeed;

}

//记下最新一次绘制时间 this.last_update=now;

}

}

动画实现原理解析和方法讨论 function move_Circle2(){

//停止动画

stop();

//画布对象

var canvas=document.getElementById("myCanvas2")

//获取上下文对象

var cxt1 =canvas.getContext("2d");

//创建多个方块对象

var Circles=[];

var Circles=[];

Circles[0]= new Circle("rgba("+Math.round(255*Math.random())+", "+Math.round(255*Math.random())+", "+Math.round(255*Math.random())+")",Math.round(600*Math.random()),Math.round(300*Math.random()),12);

Circles[1]= new Circle("rgb("+Math.round(255*Math.random())+", "+Math.round(255*Math.random())+", "+Math.round(255*Math.random())+")",Math.round(600*Math.random()),Math.round(300*Math.random()),14);

.

.

.

动画实现原理解析和方法讨论 //开始动画绘制

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;

动画实现原理解析和方法讨论

• //径向渐变

• var lingrad = cxt1.createRadialGradient(circle.x,circle.y,1,circle.x,circle.y,circle.radius);



• cxt1.fillStyle = lingrad;

• cxt1.arc(circle.x,circle.y,circle.radius,0,Math.PI*2,true);

• cxt1.fill();

动画实现原理解析和方法讨论 //弧线

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);//尽可能快的循环

}

总结

• 革命尚未成功，我们仍需努力！

• 浏览器性能优化

• 设计思路和方法

Technology

基于HTML5的canvas实例分享