狠狠撸

基于贬罢惭尝5的肠补苍惫补蝉实例分享
基于HTML5 canvas实例分享
HTML5的
jellyzhang
2011.03.28

目录

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

CANVAS元素介绍

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

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

CANVAS元素介绍

? 浏览器的支持

4

渐变背景实现原理解析

? 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);
? lingrad.addColorStop(1, 'rgba(255,255,255,0)');
? 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(); 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();
? }

腾讯微博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();
?

腾讯微博logo实现原理解析
? cxt.beginPath();
? 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.beginPath();
? 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 =
/slideshow/html5canvas-11606285/11606285/&
png';
? }

动画实现原理解析和方法讨论
? //定时器
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;
?

//圆更新 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;
}
}

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

//开始动画绘制
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);
? 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();

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

总结

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

狠狠撸

基于贬罢惭尝5的肠补苍惫补蝉实例分享

Recommended

More Related Content

Viewers also liked (7)

Similar to 基于贬罢惭尝5的肠补苍惫补蝉实例分享 (20)

基于贬罢惭尝5的肠补苍惫补蝉实例分享