Erstellen Sie einen JS-Radialverlauf mithilfe einer Matrix in HTML

WBOY
Freigeben: 2023-09-21 13:09:04
nach vorne
814 Leute haben es durchsucht

Erstellen Sie einen JS-Radialverlauf mithilfe einer Matrix in HTML

Der JSRradiale Matrixgradient wird auf folgende Weise erstellt. Sie können versuchen, die folgende Methode auszuführen, um mithilfe einer Matrix einen JS-Radialverlauf zu erstellen -

var canvas1 = document.getElementById("canvas"); //canvas1 variable to identify given canvas
var ctx1 = canvas.getContext("2d"); //This is used to tell context is 2D  

var gradient1 = ctx1.createRadialGradient(100/horizontalScale, 100/verticalScale, 100,
100/horizontalScale,100/verticalScale,0); //This will create gradient with given canvas context  

gradient1.addColorStop(1,"green"); //New color green is added to gradient
gradient1.addColorStop(0,"red"); //New color red is added to gradient

ctx1.scale(horizontalScale, verticalScale); //Context matrix ctx1 is shrinked according to horizaontal
and vertical scale
ctx1.fillStyle = gradient; //Given gradient is drawn
ctx1.fillRect(0,0, 100/horizontalScale, 100/verticalScale); //Rectangle is stretched according to scale
ctx1.setTransform(0,1,1,0,1,1);  //Context matrix is reset

canvas {    
   background-color: purple;
}
//Canvas is drawn with background color purple

<canvas id = "canvas" width = "300" height = "300"></canvas>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonErstellen Sie einen JS-Radialverlauf mithilfe einer Matrix in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:tutorialspoint.com
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage