js canvas实现简单的图像扩散效果
程序员文章站
2022-04-16 11:53:12
本文实例为大家分享了canvas实现简单图像扩散的代码，供大家参考，具体内容如下
...
本文实例为大家分享了canvas实现简单图像扩散的代码，供大家参考，具体内容如下
<!doctype html>
<html>
<body>
<canvas id="mycanvas" width="800" height="800" style="border:1px solid #c3c3c3;">
your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getelementbyid("mycanvas");
var cxt=c.getcontext("2d");
var x1=200,x2=400,x3=600,y1=400,y2=400,y3=400,lr1=10,lr2=10,lr3=10;
var lc1="#ee7942";lc2="#ee2c2c";lc3="#cd6839";
var lr1,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);
function drawarc(radiu,ecolor,type){
var grd;
var x,y,r;
var scolor;
switch(type){
case 1:
x=x1;
y=y1;
r=lr1;
lr1=radiu;
scolor=lc1;
break;
case 2:
x=x2;
y=y2;
r=lr2;
lr2=radiu;
scolor=lc2;
break;
case 3:
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();
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： docker启动ES内存溢出的解决方案
下一篇： 秋季养肺水果有哪些？