js 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>

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