ホームページ >ウェブフロントエンド >H5 チュートリアル >キャンバスのグラデーションカラー: キャンバス上でグラデーションカラー効果を実現するにはどうすればよいですか?
キャンバスのグラデーションカラー: キャンバス上でグラデーションカラー効果を実現するにはどうすればよいですか?
- 不言オリジナル
- 2018-09-26 14:01:039293ブラウズ
特定の Web ページを開くと、一部のページに色のグラデーションが表示されることがありますが、これはどのようにして実現されるのでしょうか。いわゆるグラデーション カラーは実際には色の間の遷移であり、html5 キャンバス グラデーションはグラフィックを塗りつぶしたりストロークしたりするために使用されるカラー モードです。 したがって、キャンバスを使用してカラー グラデーションを実現するにはどうすればよいでしょうか。この記事では、キャンバスのグラデーションカラーの実装について紹介します。
キャンバスにはグラデーションを作成するための 2 つのオブジェクトが用意されており、グラデーションは四角形、テキスト、線などで塗りつぶすことができることを知っておく必要があります。
キャンバス グラデーションは、線形グラデーションと放射状グラデーションに分類できます。
キャンバスで線形グラデーションを作成する関数は、createLinearGradient(x,y,x1, y1)
放射状グラデーションを作成するキャンバスの機能は、createRadialGradient(x,y,r,x1,y1,r1)です。
次の線形グラデーションと放射状グラデーションを見てみましょう。それぞれキャンバスのカラーグラデーションを実現します。
まず、キャンバスの線形グラデーションを見てみましょう。
線形グラデーションは、線形パターン、つまり水平、垂直、または斜めに色を変更します。
キャンバスの線形グラデーションの例を直接見てみましょう:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("myCanvas");
if(canvas && canvas.getContext){
var ctx=canvas.getContext("2d");
var grad=ctx.createLinearGradient(0,0,300,0); //创建一个渐变色线性对象
grad.addColorStop(0,"yellow"); //定义渐变色颜色
grad.addColorStop(1,"green");
ctx.fillStyle=grad; //设置fillStyle为当前的渐变对象
ctx.fillRect(0,0,300,100); //绘制渐变图形
}
</script>
</body>
</html>キャンバスの線形グラデーション効果は次のとおりです:
#説明: キャンバスの線形グラデーションの上記の例では、水平方向のグラデーションを実装しています。垂直方向のグラデーションを実現したい場合は、パラメーター y と y1 を次のように設定するだけです。はい、斜めのグラデーションカラーを実現したい場合は、水平方向と垂直方向のパラメータを異なるように設定する必要があります。 (追記: 特定の実装は自分で試すことができるので、ここでは詳しく説明しません)
線形グラデーションを読んだ後、キャンバス放射状グラデーションの実装を見てみましょう。
放射状グラデーションでは、色が円状に変化し、円の中心から外側に向かって色が広がります。canvas 放射状グラデーション の例も直接見てみましょう:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="myCanvas" width="400px" height="300px"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("myCanvas");
if(canvas && canvas.getContext){
var ctx=canvas.getContext("2d");
var grad=ctx.createRadialGradient(200,200,50,200,200,200) //创建一个渐变色线性对象
grad.addColorStop(0,"yellow"); //定义渐变色颜色
grad.addColorStop(1,"green");
ctx.fillStyle=grad; //设置fillStyle为当前的渐变对象
ctx.fillRect(0,0,400,400); //绘制渐变图形
}
</script>
</body>
</html>
canvas 放射状グラデーションの効果は次のとおりです:
: 放射状グラデーションを描画する場合、キャンバスの幅または高さが適切に設定されず、放射状の表示が不完全になる可能性があることに注意してください。キャンバスのサイズを変更することを検討する必要があります。
説明: 上記のキャンバスの放射状グラデーション コードは、実際には 2 つの円であり、これら 2 つの円の中心はそれぞれ (x, y) と (x1, y1) であり、半径は That です。は r と r1; 最も重要なことは、内側の円と外側の円を形成するには、これら 2 つの円を異なる半径に設定する必要があるということです。このようにして、グラデーション カラーが一方の円からもう一方の円に放射状に広がります。
この記事はここで終了です。キャンバスの詳細については、HTML5 開発マニュアルを参照してください。
以上がキャンバスのグラデーションカラー: キャンバス上でグラデーションカラー効果を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。