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

编程学习 2021-07-04 17:32www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了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> 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板