Atrybut Canvas strokeStyle

Podręcznik Canvas

Definicja i użycie

strokeStyle Atrybut ustawiający lub zwracający kolor, gradient lub wzór pędzla.

Przykład

Przykład 1

Narysuj prostokąt. Użyj koloru pędzla niebieskiego:

Twoja przeglądarka nie obsługuje tagu canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle="#0000ff";
ctx.strokeRect(20,20,150,100);

Spróbuj sam

Gramatyka

context.strokeStyle=color|gradient|pattern;

Wartość atrybutu

Wartość Opis
color Indykujący kolor pędzla rysunkowego Wartości kolorów CSS。Domyślna wartość to #000000。
gradient Obiekt gradientu używany do wypełniania rysunków (LiniowyLubRadiacyjny）。
pattern Obiekt pattern używany do tworzenia pędzla pattern.

Szczegóły techniczne

Domyślna wartość: #000000

Więcej przykładów

Przykład 2

Narysuj prostokąt. Użyj pędzla z gradientem:

Twoja przeglądarka nie obsługuje tagu canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Wypełnienie za pomocą gradientu
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);

Spróbuj sam

Przykład 3

Napisz tekst "codew3c.com" za pomocą pędzla z gradientem:

Twoja przeglądarka nie obsługuje tagu canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Verdana";
// Tworzenie gradientu
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Wypełnienie za pomocą gradientu
ctx.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,50);

Spróbuj sam

Obsługa przeglądarki

Liczby w tabeli wskazują na wersję przeglądarki, która w pełni obsługuje tę właściwość.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Komentarz:Internet Explorer 8 i wcześniejsze wersje nie obsługują elementu <canvas>.

Podręcznik Canvas