[ Leksykon ] [ HTML ] [ JavaScript ] [ Obiekty ] [ canvas ]

Obiekt CanvasGradient()

[_] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z]

Metody CanvasGradient():

addColorStop() - dodaje nowy kolor, do danego gradientu

Przykłady:

<script>

 window.onload = () => {
 
 const szer = 600;
 const wys = 400;
 
 const canvas = document.getElementById("canvas");
 canvas.width = szer;
 canvas.height = wys; 
 const ctx = canvas.getContext("2d");
 
 // Utwórz gradient stożkowy
 // Kąt początkowy wynosi 0
 // Pozycja środkowa to 100, 100
 const gradient = ctx.createConicGradient(0, 225, 225);

 // Dodaj pięć przystanków koloru
 gradient.addColorStop(0, "blue");
 gradient.addColorStop(0.24, "yellow");
 gradient.addColorStop(0.6, "red");
 gradient.addColorStop(0.71, "orange");
 gradient.addColorStop(1, "green");

 ctx.fillStyle = gradient;
 ctx.fillRect(50, 50, 350, 350);

 const gradient2 = ctx.createConicGradient(0, 500, 400);

 gradient2.addColorStop(0, "orange");
 gradient2.addColorStop(0.5, "yellow");
 gradient2.addColorStop(1, "green");
 ctx.fillStyle = gradient2;
 ctx.fillRect(450, 350, 100, 100);

 };

</script>
 
<canvas id="canvas" width="1" height="1"></canvas>

Opis:
Interfejs CanvasGradient opisujący gradient. Jest zwracany metodami CanvasRenderingContext2D.createLinearGradient(), CanvasRenderingContext2D.createConicGradient(), CanvasRenderingContext2D.createRadialGradient(). Może być używany jako fillStyle lub strokeStyle.

Linki:
canvas createConicGradient() - Tworzy gradient stożkowy wokół punktu określonego przez współrzędne
canvas createLinearGradient() - Tworzy gradient liniowy wzdłuż linii określonej przez współrzędne
canvas createRadialGradient() - Tworzy gradient promieniowy określony przez współrzędne dwóch okręgów
canvas fillStyle - Kolor lub styl wypełnienia do wykorzystania wewnątrz kształtów, domyślny #000 czarny
canvas strokeStyle - Kolor lub styl linii obrysu wokół kształtów, domyślny #000 czarny