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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
|
---
title: CSS Painting API
slug: Web/API/CSS_Painting_API
tags:
- API
- CSS
- CSS Paint API
- Houdini
- Painting
- Reference
translation_of: Web/API/CSS_Painting_API
---
<div>{{DefaultAPISidebar("CSS Painting API")}}</div>
<p>CSS Painting API（<a href="/ja/docs/Web/Houdini">CSS Houdini</a> API の傘の一部）を使用すると、開発者は要素の背景、境界線、またはコンテンツに直接描画できる JavaScript 関数を記述できます。</p>
<h2 id="Concepts_and_usage" name="Concepts_and_usage">概念と使用方法</h2>
<p>基本的に、CSS Painting API には、開発者が CSS の <code><a href="/ja/docs/Web/CSS/image"><image></a></code> の関数である {{cssxref('paint', 'paint()')}} のためのカスタム値を作成できる機能が含まれています。 次に、これらの値を {{cssxref("background-image")}} などのプロパティに適用して、要素に複雑なカスタム背景を設定できます。</p>
<p>例えば、次のようにです。</p>
<pre class="brush: css notranslate">aside {
background-image: paint(myPaintedImage);
}</pre>
<p>この API は {{domxref('PaintWorklet')}} を定義します。 これは、計算されたスタイルの変更に応じて画像をプログラムで生成するために使用できるワークレット（{{domxref('worklet')}}）です。 これの使用方法の詳細については、<a href="/ja/docs/Web/API/CSS_Painting_API/ガイド">CSS Painting API の使用</a>を参照してください。</p>
<h2 id="Interfaces" name="Interfaces">インターフェイス</h2>
<dl>
<dt>{{domxref('PaintWorklet')}}</dt>
<dd>CSS プロパティがファイルを予期している画像をプログラムで生成します。 <a href="/ja/docs/Web/API/CSS/paintWorklet"><code>CSS.paintWorklet</code></a> を介してこのインターフェイスにアクセスします。</dd>
<dt>{{domxref('PaintWorkletGlobalScope')}}</dt>
<dd><code>paintWorklet</code> のグローバル実行コンテキスト。</dd>
<dt>{{domxref('PaintRenderingContext2D')}}</dt>
<dd>
<p><a href="/ja/docs/Web/API/CanvasRenderingContext2D">CanvasRenderingContext2D API</a> のサブセットを実装します。 レンダリング先のオブジェクトのサイズである出力ビットマップを持ちます。</p>
</dd>
<dt>{{domxref('PaintSize')}}</dt>
<dd>出力ビットマップの幅と高さの読み取り専用の値を返します。</dd>
</dl>
<h2 id="Dictionaries" name="Dictionaries">ディクショナリ</h2>
<dl>
<dt>{{domxref('PaintRenderingContext2DSettings')}}</dt>
<dd><a href="/ja/docs/Web/API/CanvasRenderingContext2D">CanvasRenderingContext2D</a> 設定のサブセットを提供するディクショナリ。</dd>
</dl>
<h2 id="Examples" name="Examples">例</h2>
<p>CSS で JavaScript を使用して要素の背景に直接描画するには、<code><a href="/ja/docs/Web/API/PaintWorklet/registerPaint">registerPaint()</a></code> 関数を使用してペイントワークレットを定義し、paintWorklet の <code>addModule()</code> メソッドを使用してワークレットを含めるようドキュメントに指示し、CSS {{cssxref('paint', 'paint()')}} 関数を使用して作成した画像を含めます。</p>
<p><code><a href="/ja/docs/Web/API/PaintWorklet/registerPaint">registerPaint()</a></code> 関数を使用して、<code>'hollowHighlights'</code> という PaintWorklet を作成します。</p>
<pre class="brush: js notranslate">registerPaint('hollowHighlights', class {
static get inputProperties() { return ['--boxColor']; }
static get inputArguments() { return ['*','<length>']; }
static get contextOptions() { return {alpha: true}; }
paint(ctx, size, props, args) {
const x = 0;
const y = size.height * 0.3;
const blockWidth = size.width * 0.33;
const blockHeight = size.height * 0.85;
const theColor = props.get( '--boxColor' );
const strokeType = args[0].toString();
const strokeWidth = parseInt(args[1]);
console.log(theColor);
if ( strokeWidth ) {
ctx.lineWidth = strokeWidth;
} else {
ctx.lineWidth = 1.0;
}
if ( strokeType === 'stroke' ) {
ctx.fillStyle = 'transparent';
ctx.strokeStyle = theColor;
} else if ( strokeType === 'filled' ) {
ctx.fillStyle = theColor;
ctx.strokeStyle = theColor;
} else {
ctx.fillStyle = 'none';
ctx.strokeStyle = 'none';
}
ctx.beginPath();
ctx.moveTo( x, y );
ctx.lineTo( blockWidth, y );
ctx.lineTo( blockWidth + blockHeight, blockHeight );
ctx.lineTo( x, blockHeight );
ctx.lineTo( x, y );
ctx.closePath();
ctx.fill();
ctx.stroke();
for (let i = 0; i < 4; i++) {
let start = i * 2;
ctx.beginPath();
ctx.moveTo( blockWidth + (start * 10) + 10, y);
ctx.lineTo( blockWidth + (start * 10) + 20, y);
ctx.lineTo( blockWidth + (start * 10) + 20 + blockHeight, blockHeight);
ctx.lineTo( blockWidth + (start * 10) + 10 + blockHeight, blockHeight);
ctx.lineTo( blockWidth + (start * 10) + 10, y);
ctx.closePath();
ctx.fill();
ctx.stroke();
}
}
});</pre>
<div id="hollowExample">
<p>次に、paintWorklet を含めます。</p>
<pre class="brush: html hidden notranslate"><ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
<li>item 11</li>
<li>item 12</li>
<li>item 13</li>
<li>item 14</li>
<li>item 15</li>
<li>item 16</li>
<li>item 17</li>
<li>item 18</li>
<li>item 19</li>
<li>item 20</li>
</ul></pre>
<pre class="brush: js notranslate"> CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js');
</pre>
<p>次に、CSS の {{cssxref('paint', 'paint()')}} 関数で {{cssxref('<image>')}} を使用できます。</p>
<pre class="brush: css notranslate">li {
--boxColor: hsla(55, 90%, 60%, 1.0);
background-image: paint(hollowHighlights, stroke, 2px);
}
li:nth-of-type(3n) {
--boxColor: hsla(155, 90%, 60%, 1.0);
background-image: paint(hollowHighlights, filled, 3px);
}
li:nth-of-type(3n+1) {
--boxColor: hsla(255, 90%, 60%, 1.0);
background-image: paint(hollowHighlights, stroke, 1px);
}</pre>
</div>
<p>セレクターブロックに boxColor を定義するカスタムプロパティを含めました。 PaintWorklet からカスタムプロパティにアクセスできます。</p>
<p>{{EmbedLiveSample("hollowExample", 300, 300)}}</p>
<h2 id="Specifications" name="Specifications">仕様</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">仕様</th>
<th scope="col">状態</th>
<th scope="col">コメント</th>
</tr>
<tr>
<td>{{SpecName('CSS Painting API')}}</td>
<td>{{Spec2('CSS Painting API')}}</td>
<td>初期定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p>各 CSS Painting API インターフェイスのブラウザーの互換性のデータを参照してください。</p>
<h2 id="See_Also" name="See_Also">関連情報</h2>
<ul>
<li><a href="/ja/docs/Web/API/CSS_Painting_API/ガイド">CSS Painting API の使用</a></li>
<li><a href="/ja/docs/Web/CSS_Typed_OM">CSS Typed Object Model API</a></li>
<li><a href="/ja/docs/Web/Houdini">CSS Houdini</a></li>
</ul>
|
