html canvas签名 离屏,Canvas动画+canvas离屏技术

动画

canvas

.canvas{border:1px solid #abcdef;background-color: #a9add2;}

您的浏览器不支持canvas

var canvas=document.getelementbyid("canvas");

var ctx=canvas.getcontext("2d");//上下文，绘图环境

var posx=0,posy=0,dir=1;

setinterval(function(){

posx+=10*dir;

ctx.clearrect(0,0,canvas.width,canvas.height);//清屏

ctx.fillrect(posx,posy,50,50);

//到达边界之后调整方向

if(posx>=canvas.width-50){

dir=-1;

}else if(posx<=0){

dir=1;

}

},100);

鼠标移入方块时，方块停止动画

canvas

.canvas{border:1px solid #abcdef;background-color: #a9add2;}

您的浏览器不支持canvas

var canvas=document.getelementbyid("canvas");

var ctx=canvas.getcontext("2d");//上下文，绘图环境

var posx=0,posy=0,dir=1,stop=false;

//绑定鼠标事件

canvas.οnmοusemοve=function(e){

var mousex=e.offsetx;

var mousey=e.offsety;

//鼠标点击到小方块内部

if((mousex>posx && mousexposy && mousey

stop=true;//方块停下

}else{

stop=false;

}

}

setinterval(function(){

if(!stop){

posx+=10*dir;

}

ctx.clearrect(0,0,canvas.width,canvas.height);//清屏

ctx.fillrect(posx,posy,50,50);

//到达边界之后调整方向

if(posx>=canvas.width-50){

dir=-1;

}else if(posx<=0){

dir=1;

}

},100);

绘制复杂背景

canvas

.canvas{border:1px solid #abcdef;background-color: #a9add2;}

您的浏览器不支持canvas

var canvas=document.getelementbyid("canvas");

var ctx=canvas.getcontext("2d");//上下文，绘图环境

var posx=0,posy=0,dir=1,stop=false;

//绘制复杂背景

var drawbg=function(){

for(var i=0;i

for(var j=0;j

ctx.beginpath();

ctx.arc(i,j,5,0,2*math.pi,true);

ctx.stroke();

}

}

}

drawbg();

//绑定鼠标事件

canvas.οnmοusemοve=function(e){

var mousex=e.offsetx;

var mousey=e.offsety;

//鼠标点击到小方块内部

if((mousex>posx && mousexposy && mousey

stop=true;//方块停下

}else{

stop=false;

}

}

setinterval(function(){

if(!stop){

posx+=10*dir;

}

ctx.clearrect(0,0,canvas.width,canvas.height);//清屏

ctx.fillrect(posx,posy,50,50);

//到达边界之后调整方向

if(posx>=canvas.width-50){

dir=-1;

}else if(posx<=0){

dir=1;

}

},100);

画面我截不出来，大概是闪太快了吧

大概效果就是网格状背景在刷新的一瞬间一闪而过

这是因为背景绘制完成之后，在下面方块动画前的清屏过程中被清空掉了

解决方案是：可以把绘制背景的函数在每次清屏之后都再次调用一遍

canvas

.canvas{border:1px solid #abcdef;background-color: #a9add2;}

您的浏览器不支持canvas

var canvas=document.getelementbyid("canvas");

var ctx=canvas.getcontext("2d");//上下文，绘图环境

var posx=0,posy=0,dir=1,stop=false;

//绘制复杂背景

var drawbg=function(){

for(var i=0;i

for(var j=0;j

ctx.beginpath();

ctx.arc(i,j,5,0,2*math.pi,true);

ctx.stroke();

}

}

}

//绑定鼠标事件

canvas.οnmοusemοve=function(e){

var mousex=e.offsetx;

var mousey=e.offsety;

//鼠标点击到小方块内部

if((mousex>posx && mousexposy && mousey

stop=true;//方块停下

}else{

stop=false;

}

}

setinterval(function(){

if(!stop){

posx+=10*dir;

}

ctx.clearrect(0,0,canvas.width,canvas.height);//清屏

drawbg();//绘制背景

ctx.fillrect(posx,posy,50,50);

//到达边界之后调整方向

if(posx>=canvas.width-50){

dir=-1;

}else if(posx<=0){

dir=1;

}

},100);

但是这种做法是非常损耗性能的

在移动端问题会非常明显，可能会造成动画明显的卡顿

更好的办法是使用离屏canvas技术来实现

思路就是新增一个canvas作为离屏canvas，将复杂背景绘制在上面

然后每次清屏之后把离屏canvas的背景拷贝到动画canvas上

当然别忘了给离屏的canvas设置为不可见

放出全部代码：

canvas

.canvas{border:1px solid #abcdef;background-color: #a9add2;}

#canvas2{display: none;}

您的浏览器不支持canvas

您的浏览器不支持canvas

var canvas=document.getelementbyid("canvas");

var ctx=canvas.getcontext("2d");//上下文，绘图环境

var canvas2=document.getelementbyid("canvas2");

var ctx2=canvas2.getcontext("2d");//上下文，绘图环境

var posx=0,posy=0,dir=1,stop=false;

//在离屏canvas上绘制复杂背景

var drawbg=function(){

for(var i=0;i

for(var j=0;j

ctx2.beginpath();

ctx2.arc(i,j,5,0,2*math.pi,true);

ctx2.stroke();

}

}

}

drawbg();//绘制背景

//绑定鼠标事件

canvas.οnmοusemοve=function(e){

var mousex=e.offsetx;

var mousey=e.offsety;

//鼠标点击到小方块内部

if((mousex>posx && mousexposy && mousey

stop=true;//方块停下

}else{

stop=false;

}

}

setinterval(function(){

if(!stop){

posx+=10*dir;

}

ctx.clearrect(0,0,canvas.width,canvas.height);//清屏

//清屏之后把离屏canvas的背景拷贝过来

ctx.drawimage(canvas2,0,0,canvas2.width,canvas2.height,0,0,canvas.width,canvas.height);

ctx.fillrect(posx,posy,50,50);

//到达边界之后调整方向

if(posx>=canvas.width-50){

dir=-1;

}else if(posx<=0){

dir=1;

}

},100);