html的画布的特点,html5 canvas: 使用多层画布

开发多层动画画布的效果 (原创，根据对刘志军代码的评论代码修改。)

评论代码见: http://www.open-open.com/code/view/1454844796714

本代码演示:: http://runjs.cn/detail/1pd7zcit

1.[代码]使用 html5 canvas 多层画布的优点

Moving Canvas

var k6=0; //产生动画背景效果、使每次调用m6()时，color6 数组下标更

//用于同心环颜色渐变的数组数据新

var color6= new Array("#0F0","#0F2","#0F4","#0F6", "#0F8","#0FA","#0FC","#0FE","#0FF","#0FE","#0FC","#0FA","#0F8","#0F6","#0F4","#0F2");

function m6(){

var h = document.getElementById("myCanvas6");

var ctx6 = h.getContext("2d");

var grd2 = ctx6.createRadialGradient(80,80,15,80,80,220);

for (var i=0;i<=10;i++)

grd2.addColorStop(i/10,color6[(i+k6++)%color6.length]);

ctx6.fillStyle=grd2;

ctx6.fillRect(0,0,320,500);

}

//用于同心环颜色渐变的数组数

var color5=new Array("red","#FF6100","#FFFF00","green","blue","#082E54","#A020F0");

var k=0;//产生动画背景效果、使每次调用m5()时，color5 数组下标更

function m5(){

var g=document.getElementById("myCanvas5");

var ctx5 = g.getContext("2d");

var grad = ctx5.createLinearGradient(0,0,500,0);

for (var i=0;i<=10;i++)

grad.addColorStop(i/10,color5[(i+k++)%color5.length]);

ctx5.fillStyle=grad;

ctx5.font="35Px KAITI";

ctx5.fillText("你好，开源中国", 10,100);

}

var m4_alpha=0; //产生坐标轴旋转的递增变量

function m4(){

var f = document.getElementById("myCanvas4");

var ctx4 = f.getContext("2d");

ctx4.clearRect(0,0,f.width,f.height);

ctx4.save();

ctx4.translate(130,150);

ctx4.rotate(Math.PI/180*m4_alpha++);

ctx4.font="35px KAITI";

ctx4.strokeText("开源中国",0,0);

ctx4.restore();

}

var font_size=20; //产生文字大小变化的变量

var m3_larger=true; //此变量为真，文字变大，为徦，文字变小

function m3(){

var e = document.getElementById("myCanvas3")

var ctx3= e.getContext("2d");

ctx3.clearRect(0,0,e.width,e.height);

ctx3.font=font_size+"px Arial";

if (m3_larger) font_size++; else font_size--;

if(font_size==30) m3_larger=false;

if (font_size==20) m3_larger=true;

ctx3.fillStyle="orange";

ctx3.fillText("Hello, Open Source",5,30);

}

var m2_x0=0; //造成园的横坐标变化

var m2_eastward=true; //变量为真，横坐标变大，园往西走

function m2(){

var d = document.getElementById("myCanvas2");

var ctx2 = d.getContext("2d");

ctx2.clearRect(0,0,d.width,d.height);

ctx2.beginPath();

ctx2.arc(95 + m2_x0, 50, 40,0,2*Math.PI);

//ctx2.fillStyle="green";

var grd2 = ctx2.createRadialGradient(95 + m2_x0,50,5,

95 + m2_x0, 50, 40);

grd2.addColorStop(0,"white");

grd2.addColorStop(1,"green");

ctx2.fillStyle=grd2;

ctx2.fill();

ctx2.stroke();

if (m2_eastward) m2_x0++; else m2_x0--;

if (m2_x0==100) m2_eastward=false;

if (m2_x0==0) m2_eastward=true;

}

var m1_x=0; //造成直线和红长方形末端变化的 x 坐标

var m1_y=0; //造成直线和红长方形末端变化的 y 坐标

var m1_increase=true; //控制直线和红方块末端变化的布尔变量

function m1(){

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.clearRect(0,0,c.width,c.height);

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0, m1_x+35,m1_y+25);

ctx.beginPath(); //必须的

ctx.moveTo(0,0);

ctx.lineTo(m1_x+35,m1_y+25);

ctx.stroke();

if (m1_increase) {m1_x++; m1_y++;}

else { m1_x--; m1_y--;};

if (m1_x==45) m1_increase=false;

if (m1_y==0) m1_increase=true;

}

function ani(){

//设置各个画布更新的频度

setInterval('m1()',200);

setInterval('m2()',300);

setInterval('m3()',400);

setInterval('m4()',500);

setInterval('m5()',600);

setInterval('m6()',700);

}

#myCanvas{

z-index:1;

position:absolute;left:0;top:0;

}

#myCanvas2{

z-index:2;

position:absolute;left:80px;top:0;

}

#myCanvas3{

z-index:3;

position:absolute;left:0;top:90px;

}

#myCanvas4{

z-index:4;

position:absolute;left:0;top:100px;

}

#myCanvas5{

z-index:5;

position:absolute;left:0;top:300px;

}

#myCanvas6{

position:absolute;

left:0px;

top:0px;

z-index:0;

}

2.[图片] 无标题.png