HTML5 でキャンバスを使用してグラデーションテキストの効果を実現する方法-htmlチュートリアル-php.cn

HTML5 でキャンバスを使用してグラデーションテキストの効果を実現する方法

yulia

リリース： 2018-10-22 10:27:18

オリジナル

5970 人が閲覧しました

HTML5 でキャンバスを使用してグラデーションテキスト効果を実現するために必要な構文とパラメーターの設定は次のとおりです。よくわからない人は参照してください。

1. fillText( )

構文: context.fillText(text,x,y,maxWidth)

text は、次のようにする必要があることを示します。キャンバス上の出力テキスト
x は、テキストの描画が開始される X 軸座標を表します。
y は、テキストの描画が開始される Y 軸座標を表します。
maxWidth は、許容される最大テキスト幅を表します、単位はピクセルであり、オプションの値です。

2. createLinearGradient( )

構文: context.createLinearGradient(x0,y0,x1,y1)

x0 は、グラデーションの X を表します。始点の軸座標
y0 は、勾配の始点の Y 軸座標を表します。
x1 は、勾配の終点の X 軸座標を表します。
y1 は、勾配の終点 # の Y 軸座標を表します

## 例: 1 : 通常のテキスト (色のグラデーションなし) を作成します。コードは次のとおりです:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <canvas id="myCanvas" width="300" height="150" style="border:1px solid #ccc;"></canvas>
 </body>
 <script type="text/javascript">  
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");  
  ctx.font="20px Georgia";
  ctx.fillText("学习使我快乐",10,50);
 </script>
</html>

ログイン後にコピー

効果の画像は次のとおりです:

HTML5 でキャンバスを使用してグラデーションテキストの効果を実現する方法 #例 2: グラデーションテキストを作成する、具体的なコードは次のとおりです:

ctx.font="30px Verdana";
  // Create gradient
  var gradient=ctx.createLinearGradient(0,0,c.width,0);
  gradient.addColorStop("0","orange");
  gradient.addColorStop("0.5","blue");
  gradient.addColorStop("1.0","red");
  // Fill with gradient
  ctx.fillStyle=gradient;
  ctx.fillText("have a nice day ",10,100);

ログイン後にコピー

レンダリング:

HTML5 でキャンバスを使用してグラデーションテキストの効果を実現する方法グラデーションテキストを作成する場合、まず createLinearGradient() を使用してグラデーションを作成し、次に fillStyle を使用してグラデーションを変更します。テキストに適用します。