微客导航 » 文章资讯 » js canvas实现简单的图像扩散效果

js canvas实现简单的图像扩散效果

2023-09-25 04:32:05 143

本文实例为大家分享了canvas实现简单图像扩散的代码，供大家参考，具体内容如下






Yourbrowserdoesnotsupportthecanvaselement.




varc=document.getElementById("myCanvas");
varcxt=c.getContext("2d");
varx1=200,x2=400,x3=600,y1=400,y2=400,y3=400,lr1=10,lr2=10,lr3=10;
varlc1="#EE7942";lc2="#EE2C2C";lc3="#CD6839";
varlr1,lr2,lr3;


drawarc(15,"#CAE1FF",1);
drawarc(25,"#98FB98",2);
drawarc(25,"#757575",3);

drawarc(30,"#000000",1);
drawarc(35,"#32CD32",2);
drawarc(50,"#6959CD",3);


drawarc(45,"red",1);
drawarc(50,"#fff",2);
drawarc(65,"#000",3);


functiondrawarc(radiu,ecolor,type){
vargrd;
varx,y,r;
varscolor;
switch(type){
case1:
x=x1;
y=y1;
r=lr1;
lr1=radiu;
scolor=lc1;
break;
case2:
x=x2;
y=y2;
r=lr2;
lr2=radiu;
scolor=lc2;
break;
case3:
x=x3;
y=y3;
r=lr3;
lr3=radiu;
scolor=lc3;
break;
default:
}
grd=cxt.createRadialGradient(x,y,r,x,y,radiu);
grd.addColorStop(0,scolor);
grd.addColorStop(1,ecolor);
cxt.fillStyle=grd;
cxt.beginPath();
cxt.arc(x,y,radiu,0,360,false);
cxt.closePath();
cxt.fill();
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

js canvas实现简单的图像扩散效果

热门推荐

随机推荐