6
HTMLキャンバスでは、ctx.fillStyle = 'red'を使ってテキスト行の色を設定できます。これは素晴らしい方法です。私がしようとしているのは、単語を一度しか描かなくても、手紙で色を設定できることです。HTML5 Canvasで文字の色で表示できますか？
テキストが「Hello different colors！」の場合、文字Hを赤にする方法はありますか？テキストの残りの部分は白ですか？
A
答えて
12
この回避策を提示します。基本的には、一度に1つの文字を出力し、描画されたときに各文字の幅を決定するためにinbuilt measureText()関数を使用します。次に、同じ金額で描画したい位置をオフセットします。このスニペットを修正して、効果を生み出すことができます。そのような
<canvas id="canvas" width="300" height="300"/>
とJavaScript：
は、私たちがそうのようなHTMLがあるとし
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
function randomColor(){
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
return "rgb("+ r + "," + g + "," + b +")";
}
function texter(str, x, y){
for(var i = 0; i <= str.length; ++i){
var ch = str.charAt(i);
ctx.fillStyle = randomColor();
ctx.fillText(ch, x, y);
x += ctx.measureText(ch).width;
}
}
texter("What's up?", 10, 30);
我々は出力を取得したい：
は、アクションat jFiddleでそれをチェックしてください。私は最新のChromeを使用しました。
3
ctx.fillStyleは、ステートマシンとして動作します。 ctx.fillStyle = 'red'と言うと、物事は赤色になります。 ctx.fillStyle = 'white'を設定し、文字Hを入力してからctx.fillStyle = 'red'と設定し、残りの文章を書き込むことで、必要な処理を実行できます。
関連する問題
ありがとうございました。何度も書くことなくこれを行う方法があることを期待していましたが、あなたの解決策は本当に良い選択肢です。特に動的テキストのサイジングを乱すことはありません。ありがとう。 –
あなたは大歓迎です。そして、stackoverflowへようこそ！一方、*受け入れ*のようにあなたの派手な答えをマークする必要があります。 ;） – Gleno
ああ、やった。私は、このメソッドの修正版を使って欲しいものを実装しました。私が気づいたことの1つは、フレームごとに各文字を描画する場合、アニメーションではFirefox（IE/Chromeはうまくいきました）で極端に遅れてしまうことです。私は最初の色が違っていたので、最初の文字を書いてから残りの文字を書きました。 –