Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > Einführung in die Verwendung von Leinwand zur Erzielung eines einfachen Bilddiffusionseffekts

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

巴扎黑
Freigeben： 2017-09-07 10:22:09
Original
1981 Leute haben es durchsucht

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>
Nach dem Login kopieren

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!

Verwandte Etiketten：
canvas 图像 简单
Quelle：php.cn
Vorheriger Artikel：Detaillierte Erläuterung der Pfadkonfiguration von require.js und der Einführungsmethode von CSS Nächster Artikel：Einführung in Methoden zum Löschen bestimmter Elemente aus JavaScript-Arrays
Erklärung dieser Website
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
Neueste Artikel des Autors
Aktuelle Ausgaben
Können PDF-Dateien mit HTML5 und Javascript ausgeführt werden? Ich habe die dumme Idee, ein Programm zu erstellen, das auf keinem Computer blockiert wird...
Aus 2024-04-05 12:57:00
0
1
456
Die *zwei* Höhenwerte der Leinwand abrufen? Ich versuche, zwei Höhenwerte dieser Leinwand zu ermitteln. <canvaswidth="886"...
Aus 2024-04-05 09:32:33
0
1
1360
So exportieren Sie JPG-Dateien aus mehreren Leinwänden Ich habe mehrere Leinwände, die als Ebenen verwendet werden. canvasc1=backgroundimage.canv...
Aus 2024-04-03 21:02:43
0
1
319
Warum wird jedes Mal, wenn ich mein Vite React-Projekt speichere, ein neues Canvas-Element zum Seitenkörper hinzugefügt, anstatt das vorhandene Canvas-Element zu ersetzen? Ich versuche, ThreeJs zu lernen (ich bin auch neu in der Javascript-Webentwicklung). Nachd...
Aus 2024-03-30 09:57:49
0
1
396
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage