CSS ペイント API: CSS のような描画ボード

。箱 {
    幅: 180ピクセル; 高さ: 180ピクセル;
    /* transparent-grid に名前を付ける */
    背景画像: ペイント(透明なグリッド);
}

if (window.CSS) {
    CSS.paintWorklet.addModule('paint-grid.js');
}

// transparent-grid の命名と CSS の対応 registerPaint('transparent-grid', class {
    ペイント(コンテキスト, サイズ) {
       // ここに描画コードがあります。
    }
});

registerPaint('abc', クラス {
    ペイント(コンテキスト、サイズ、プロパティ) {
       // 描画コードはここに記述します。
    }
});

サイズ

size 、図面のサイズを含むオブジェクトです。データ構造は次のとおりです。

{
    幅: 180,
    高さ: 180
}

sizeのサイズは、 background-sizeプロパティのサイズによって影響を受けます。したがって、繰り返しの背景の場合は、background-repeat を使用して、描画された JS コードをループせずにタイルのループを実行できます。たとえば、これから示すデモ効果も、CSS 部分では次のようにして実現できます。

。箱 {
    幅: 180ピクセル; 高さ: 180ピクセル;
    背景画像: ペイント(透明なグリッド);
    背景サイズ: 16px 16px;
}

次に、paint-grid.js で、白、灰色、灰色、白を塗りつぶすだけで、4 つのグリッドで十分であり、ループは必要ありません。プロパティを使用すると、取得した CSS プロパティとプロパティ値 (CSS 変数値を含む)、およびその他のパラメータを取得できます。

百聞は一見にしかず、こちらをクリックしてください: CSS ペイント API は背景のデモとして透明なグリッドを描画します (現在は Chrome でのみ動作します)

効果は以下のとおりです。

paint-grid.js の完全な描画コードは次のとおりです。

registerPaint('transparent-grid', クラス {
    ペイント(コンテキスト, サイズ) {
        // 2 つのグリッド カラー var color1 = '#fff', color2 = '#eee';
        // グリッドサイズ var unit = 8;
        // 水平軸をループします for (var x = 0; x < size.width; x += unit) {
            (var y = 0; y < size.height; y += 単位) {
                context.fillStyle = (x + y) % (units * 2) === 0 ? color1 : color2;
                context.fillRect(x, y, 単位, 単位);
            }
        }
    }
});

補充:
グリッドのような繰り返し背景の場合は、 background-repeatを使用してタイル状に並べてループさせることができます。描画された JS コードをループさせる必要はありませんが、描画サイズを変更するにはbackground-sizeプロパティを使用する必要があります。たとえば、上記のデモ効果は、CSS 部分では次のようにも実現できます。

。箱 {
    幅: 180ピクセル; 高さ: 180ピクセル;
    背景画像: ペイント(透明なグリッド);
    背景サイズ: 16px 16px;
}

次に、paint-grid.js で、白、灰色、灰色、白を塗りつぶすだけで、4 つのグリッドで十分であり、ループは必要ありません。

registerPaint('transparent-grid', クラス {
    ペイント(コンテキスト, サイズ) {
        // 2 つのグリッド カラー var color1 = '#fff', color2 = '#eee';
        // 2 つの白いグリッド context.fillStyle = color1;
        コンテキスト.fillRect(0, 0, 8, 8);
        コンテキスト.fillRect(8, 8, 8, 8);
        // 2 つの灰色のグリッド context.fillStyle = color1;
        コンテキスト.fillRect(0, 4, 8, 8);
        コンテキスト.fillRect(4, 0, 8, 8);
    }
});

もっと分かりやすく。

3. CSS 変数がペイント API を輝かせる

上記の例は、CSS ペイント API の基本的な使用方法を示しています。ただし、見た目は流行っていますが、CSS ペイント API の優れた機能を反映していません。

考えてみてください。JS と Canvas API を直接使用してグリッドパターンを描画し、それを Base64 に変換して、要素の背景画像として直接表示すれば、同じ効果が得られ、互換性も向上し (IE9+ をサポート)、すべての Canvas API を制限なく使用できるようになります。それに比べて、CSS ペイント API を使用する理由はまったくありません。

それは正しい！静的な背景だけが必要な場合は、キャンバスに直接描画してからBase64画像に変換する方がよいでしょう（
toDataURL() メソッド) または Blob イメージ (toBlob() メソッド)。

CSS ペイント API の利点は、CSS プロパティ値としてレンダリングがリアルタイムで行われ、ブラウザーで自動的に再描画されることです。したがって、描画が CSS 変数に関連付けられている限り、すべてのレンダリング効果がリアルタイムで更新され、再描画されます。これは素晴らしいことです。

上記の透明なグリッドの例を引き続き使用すると、次のようにグリッドの色とグリッドのサイズを CSS 変数として抽出できます。

。箱 {
    幅: 180ピクセル; 高さ: 180ピクセル;
    --color1: #fff;
    --color2: #eee;
    --ユニット: 8;
    背景: ペイント(カスタムグリッド);
}

以下のように、描画時にこれらの定義済み変数を取得できます。

registerPaint('カスタムグリッド', クラス {
    // 3つの変数を取得する static get inputProperties() {
        戻る [
            '--color1',
            '--color2',
            '--単位'
        ]
    }
    ペイント(コンテキスト、サイズ、プロパティ) {
        // 2 つのグリッド カラー var color1 = properties.get('--color1').toString();
        var color2 = properties.get('--color2').toString();
        // グリッドサイズ var unit = Number(properties.get('--units'));
        // 描画コードは前と同じです...
    }
});

静的効果は同じです:

ただし、CSS コードで定義された変数値を変更すると、ペイントの背景画像のリアルタイムの変更効果を確認できます (下の GIF を参照)。

百聞は一見にしかず。こちらをクリックしてください: CSS 変数とペイント API を使って透明なグリッドを描画するデモ

追加のタイマーは必要なく、リアルタイムレンダリング、コントロールが非常に便利です。

CSS Properties & Values API を使用すると、 --unitsなどのすべての変数を合法的な CSS プロパティとして登録できます。その後、 transitionおよびanimationプロパティを使用して、純粋な CSS でペイント背景画像の動きとアニメーションを制御でき、ボタンに浮かぶ雲の効果はまったく問題ありません。

この事例については後ほど紹介します。

Houdini、他の

この記事で紹介したCSS Paint APIはCSS Houdiniの一部であり、最後に記載されているCSS Properties & Values APIも現在ChromeでサポートされているAPIの一部です。 CSS Houdini は CSS プロパティやレイアウトなどをカスタマイズでき、その将来の可能性は無限です。

互換性の問題により、実際のプロジェクトで CSS Paint API を使用する場合は、互換性処理も行う必要があります。例:

。箱 {
    幅: 180ピクセル; 高さ: 180ピクセル;
    背景: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQVQ4T2P8////fwY84P379/ikGRhHDRgWYfDu3Tu86UBQUBB/Ohg1gIFx6IcBABlfVjmYTYi7AAAAAElFTkSuQmCC);
    背景: ペイント(透明なグリッド、何でも);
}

CSS Paint API は、動的なシーンや、リアルタイムの描画とレンダリングを必要とする要件を満たすのに適しています。純粋に静的な表示であれば、JS と Canvas を直接使用して実現できます。テクノロジーのためにテクノロジーを使用する必要はありません。

CSS Houdini とそれに関連する新しいテクノロジーには、遊べるものがたくさんあります。それらについては、今後さらに詳しく紹介していきます。この記事はここで終わりです。お読みいただきありがとうございました!

参照ドキュメント

https://www.w3.org/TR/css-paint-api-1/https://css-houdini.rocks/

最後に、皆さんが興味を持つかもしれない別のことについてお話ししたいと思います。この記事の透明なグリッド効果を実現する最良の方法は、線形グラデーションと CSS3 の複数の背景を使用して、CSS backgroundを直接描画することです。

コードは次のとおりです。

。箱 {
    幅: 180ピクセル; 高さ: 180ピクセル;
    背景色: #fff;
    背景画像: linear-gradient(45deg, #eee 25%, 透明 25%, 透明 75%, #eee 75%, #eee), linear-gradient(45deg, #eee 25%, 透明 25%, 透明 75%, #eee 75%, #eee);
    背景サイズ: 16px 16px;
    背景位置: 0 0, 8px 8px;
}

リアルタイム効果は以下のとおりです。

サイズコントロールは非常に便利で、 animationも自然にサポートします。

この記事はオリジナル記事であり、知識ポイントは頻繁に更新され、いくつかのエラーは修正されます。したがって、トレースしやすく、古くて誤った知識に惑わされることを避け、より良い読書体験を得るために、転載するときは元のソースを維持してください。
この記事のアドレス: https://www.zhangxinxu.com/wordpress/?p=8204

CSS 界の描画ボードである CSS Paint API に関するこの記事はこれで終わりです。CSS Paint API に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。