js canvas實現簡單的圖像擴散效果

來源：懂視網責編：小OO 時間：2020-11-27 22:30:52

js canvas實現簡單的圖像擴散效果

本文實例為大家分享了canvas實現簡單圖像擴散的代碼，供大家參考，具體內容如下：<，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。

推薦度：

點擊下載本文 文檔為doc格式

導讀本文實例為大家分享了canvas實現簡單圖像擴散的代碼，供大家參考，具體內容如下：<，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。

本文實例為大家分享了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>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

js canvas實現簡單的圖像擴散效果

推薦度：

點擊下載本文 文檔為doc格式

標簽：實現 js 圖像

熱門焦點

js canvas實現簡單的圖像擴散效果

js canvas實現簡單的圖像擴散效果

js canvas實現簡單的圖像擴散效果

最新推薦

猜你喜歡

熱門推薦