ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5-5 __キャンバス: グラデーション

HTML5-5 __キャンバス: グラデーション

黄舟
黄舟オリジナル
2017-02-18 14:24:201407ブラウズ

グラデーションは色に適用される描画メソッドです。

グラデーションを使用するには、次の 3 つの手順が必要です。

1. グラデーション オブジェクトの色を設定します。つまり、addColorStop( ) 関数、遷移方法を示す addColorStop 関数を使用すると、color と offset という 2 つのパラメータを指定できます。 color パラメータは、開発者がオフセット位置でストロークまたは塗りつぶすときに使用したい色を指します。 オフセットは 0.0 ~ 1.0 の値で、グラデーション ラインに沿った距離を表します

3 コンテキストの塗りつぶしスタイルまたはストローク スタイルのグラデーションを設定します。

グラデーションは、線に沿って色がゆっくりと変化するものと考えることができます。コードを参照してください



上記の線形に加えて、グラデーション、 Canvas は、指定した 2 つの円の間の円錐形の領域で色が滑らかに変化する放射状のグラデーションもサポートしています。

メソッドは


createRaddialGradient(

x

0

,

y0, r0、x1、y1、r1); 合計 6 つのパラメータがあります。最初の 3 つのパラメータは、中心が (x0, y0)、半径が r0 の円を表します。最後の 3 つのパラメータは、中心が (x1, y1)、半径が r1 の別の円を表します。グラデーションは 2 つの円の間の領域に表示されます 添付ファイル、画像

上記は HTML5 5 __Canva の内容です。 s:グラデーション、その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) をフォローしてください。


声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。