1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
|
---
title: CanvasRenderingContext2D.strokeStyle
slug: Web/API/CanvasRenderingContext2D/strokeStyle
translation_of: Web/API/CanvasRenderingContext2D/strokeStyle
---
<div>{{APIRef}}</div>
<p>Свойство<strong> </strong><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.strokeStyle</code></strong>, предоставляемое Canvas 2D API задаёт цвет или стиль, используемый при выполнении обводки фигур. По умолчанию установлено значение <code>#000</code> (чёрный цвет).</p>
<p>Смотрите также главу <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying styles and color</a> в <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a>.</p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="syntaxbox"><var><em>ctx</em>.strokeStyle = color;
</var><var><em>ctx</em>.strokeStyle = gradient;
</var><var><em>ctx</em>.strokeStyle = pattern;</var>
</pre>
<h3 id="Значения">Значения</h3>
<dl>
<dt><code>color</code></dt>
<dd>{{domxref("DOMString")}} строка содержащая цвет в формате, поддерживающимся стандартом CSS ({{cssxref("<color>")}}).</dd>
<dt><code>gradient</code></dt>
<dd>Объект класса {{domxref("CanvasGradient")}} (линейный или круговой градиент ).</dd>
<dt><code>pattern</code></dt>
<dd>Объект класса {{domxref("CanvasPattern")}} (повторяющееся изображение).</dd>
</dl>
<h2 id="Примеры">Примеры</h2>
<h3 id="Using_the_strokeStyle_property" name="Using_the_strokeStyle_property">Использование <code>strokeStyle</code> с цветом</h3>
<p>Ниже представлен простой фрагмент кода, использующий <code>strokeStyle</code> с цветом.</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><canvas id="canvas"></canvas>
</pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js">var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.strokeStyle = "blue";
ctx.strokeRect(10, 10, 100, 100);
</pre>
<p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:</p>
<div class="hidden">
<h6 id="Playable_code" name="Playable_code">Playable code</h6>
<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
<input id="edit" type="button" value="Edit" />
<input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.strokeStyle = "blue";
ctx.strokeRect(10, 10, 100, 100);</textarea>
</pre>
<pre class="brush: js">var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;
function drawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
eval(textarea.value);
}
reset.addEventListener("click", function() {
textarea.value = code;
drawCanvas();
});
edit.addEventListener("click", function() {
textarea.focus();
})
textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
</pre>
</div>
<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
<h3 id="A_strokeStyle_example" name="A_strokeStyle_example">Использование <code>strokeStyle </code>в циклах<code> for</code></h3>
<p>В этом примере свойство <code>strokeStyle</code> используется для рисования границ фигур. Мы используем метод {{domxref("CanvasRenderingContext2D.arc", "arc()")}} для рисования кругов.</p>
<pre class="brush: js">var ctx = document.getElementById('canvas').getContext('2d');
for (var i=0;i<6;i++){
for (var j=0;j<6;j++){
ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +
Math.floor(255-42.5*j) + ')';
ctx.beginPath();
ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
ctx.stroke();
}
}
</pre>
<div class="hidden">
<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre>
</div>
<p>Результат выглядит так:</p>
<p>{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}</p>
<h2 id="Спецификации">Спецификации</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Спецификации</th>
<th scope="col">Статус</th>
<th scope="col">Комментарий</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokestyle", "CanvasRenderingContext2D.strokeStyle")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<p>{{Compat("api.CanvasRenderingContext2D.strokeStyle")}}</p>
<h2 id="Особенности_WebKitBlink">Особенности WebKit/Blink</h2>
<ul>
<li>В браузерах на базе Webkit и Blink помимо этого свойства, также поддерживается нестандартный метод <code>ctx.setStrokeColor()</code>.
<pre class="brush: js">setStrokeColor(color, optional alpha);
setStrokeColor(grayLevel, optional alpha);
setStrokeColor(r, g, b, a);
setStrokeColor(c, m, y, k, a);
</pre>
</li>
</ul>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li>Интерфейс предоставляющий данное свойство: {{domxref("CanvasRenderingContext2D")}}</li>
<li>{{domxref("CanvasGradient")}}</li>
<li>{{domxref("CanvasPattern")}}</li>
</ul>
|
