Hochwertiger HTML5 und Javascript Code von dem Designbüro Standardabweichung aus München

HTML5 Canvas - Context 2D - Radial Gradient

Das HTML5 und Javascript Bild von Standardabweichung aus München

Radial Gradient

Füllen von Formen und Konturen mit radialen Farbverläufen auf dem HTML5 Canvas Element.

//Initialisierung context.lineWidth = 10; context.lineJoin = 'miter'; //'bevel' 'round' context.lineCap = 'butt'; //'square' 'round' var gradient = context.createRadialGradient(150, 150, 0, 150, 150, 100); //createRadialGradient(x,y,radius,x,y,radius) gradient.addColorStop(0, '#000000'); //addColorStop(position[0.0-1.0], color) gradient.addColorStop(1, '#FFFFFF'); //addColorStop(position[0.0-1.0], color) context.strokeStyle = gradient; context.fillStyle = gradient; context.beginPath(); context.rect(100, 100, 200, 200); //rect(x,y,width,height); context.stroke(); //Fülle Kontur mit den in strokeStyle definierten Eigenschaften context.fill(); //Fülle Rechteck mit den in fillStyle definierten Eigenschaften

HTML5 / Javascript Code Teilen

Javascript Snippet auf Facebook teilen  Facebook
Javascript Snippet auf Facebook teilen  Google+