Heim > Artikel > Web-Frontend > Einführung in die Verwendung von Leinwand zur Erzielung eines einfachen Bilddiffusionseffekts

Einführung in die Verwendung von Leinwand zur Erzielung eines einfachen Bilddiffusionseffekts

巴扎黑Original: 2017-09-07 10:22:091936Durchsuche

In diesem Artikel wird hauptsächlich der einfache Bilddiffusionseffekt von js Canvas vorgestellt, der einen gewissen Referenzwert hat.

Das Beispiel dieses Artikels teilt die Canvas-Implementierung mit allen Für die einfache Bildverbreitung dient der spezifische Inhalt wie folgt:

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

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung von Leinwand zur Erzielung eines einfachen Bilddiffusionseffekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung der Pfadkonfiguration von require.js und der Einführungsmethode von CSSNächster Artikel：Detaillierte Erläuterung der Pfadkonfiguration von require.js und der Einführungsmethode von CSS

In Verbindung stehende Artikel

Mehr sehen