ぼかしテキスト
qnyp を開いたらネタバレを含む感想のテキストがぼかされて見えずらくしてあった。
あまり Web では見ない表現ではじめは驚いたけど、ネタバレ文章のように内容が読み解かれてはいけないけど文章量などの情報をなんとなく見せたいとき、ぼかしテキストはなかなか良さそうだと思った。
テキストのぼかしは CSS で行われていて、文字の塗りを透明にしてテキストシャドウでぼんやり文字の輪郭を取ってる。
Demo: http://jsfiddle.net/thleap/1hprth4f/
.blur-text { text-shadow: 0 0 7px rgba(0,0,0, .7); color: rgba(255,255,255, 0); }
ちなみにぼかし量をピクセルで指定してるので、大きな文字では文字サイズに対するぼかし具合が弱く、このままのスタイルでは同じ効果は得られない。
使う場面があるかどうかは別として、ぼかし量を em で指定してすると文字サイズに合わせてスタイルを変更する必要はなくなりそう。
Demo: http://jsfiddle.net/thleap/1hprth4f/2/
/* text-shadow の 3番目の値を em で指定 */ .blur-text02 { text-shadow: 0 0 .5em rgba(0,0,0, .7); color: rgba(255,255,255, 0); }
Canvas テキストのお試し
今週少しずつ進めている HTML5 Canvas、 3章「テキスト」でテキストアレンジャーというのものを作った。
で、章の終わりで完成したものをサンプルとして残しておくだけでも良かったんだけど、できたものを使っていると楽しくなってきたので、レイアウトを最低限整えてみたり背景の色も変えれるようにしてみた。
あと、テキストアレンジャーを作ってる途中に透明度の指定がうまく反映されないことがあったんだけど、これはテキストの透明度の値が背景にも影響されてたからっぽい。背景に context.globalAlpha = 1 を指定するとちゃんと予期した通りの表示になった。
- 修正前: http://jsfiddle.net/thleap/bhoyhh39/ ... Alpha バーを途中どこかで止めながら 1 ~ 0 に近づけた時（途中 0.5 などでバーを止めた時）、0 になってもテキストが完全な透明にならない。
- 修正後: http://jsfiddle.net/thleap/bhoyhh39/1/
JSFiddle は編集画面の URL の末尾に show を加えると結果をフル画面表示にできて、jsdo.it は fullscreen を加えるとフル画面にできる。忘れがち。
Canvas でテキストの中央揃え
昨日から引き続き HTML5 Canvas 読んでて、今日は「3.1 基本的なテキストの描画」をやってる。
テキストの中央揃えには measureText() メソッド を使うみたい。
以下のものでは Canvas 幅の半分の位置から算出したテキスト幅の半分をさらに引いて行内 （x軸）の中央揃えを行い、列内（y軸）に対しての中央揃えは単純に Canvas の縦幅の半分の位置を使ってる。
上記の指定を行った後、これらを context.fillText の x座標、y座標に指定するとテキストが中央揃えになる。
Demo: http://jsfiddle.net/thleap/aqs5at8p/4/
window.addEventListener('load', eventWindowLoaded, false); function eventWindowLoaded() { canvasApp(); } function canvasApp() { var theCanvas = document.getElementById('canvasOne'); var context = theCanvas.getContext('2d'); var message = 'your text'; var formElement = document.getElementById('textBox'); formElement.addEventListener('keyup', textBoxChanged, false); drawScreen(); function drawScreen() { // 背景 context.fillStyle = 'yellow'; context.fillRect(0, 0, theCanvas.width, theCanvas.height); // テキスト context.font = '24px sans-serif'; // テキストを Canvas に対して中央揃え var metrics = context.measureText(message); var textWidth = metrics.width; var xPosition = (theCanvas.width / 2) - (textWidth / 2); var yPosition = (theCanvas.height / 2); context.fillStyle = 'red'; context.fillText(message, xPosition, yPosition); } // input 要素に入力したテキストを Canvas 上に表示 function textBoxChanged(e) { var target = e.target; message = target.value; drawScreen(); } }
最初に出してる "your text" の部分が中央揃えにならなくて困った。
けど、それは中央揃え関連の指定の後に context.font の指定を置いていたからだった。
中央揃え関連の指定前に context.font の指定を置いてやると最初に出しているテキストにも中央揃えが適用された。
Canvas での色とグラデーションの扱い方
オライリーから出ている「HTML5 Canvas」読んでる。
線形グラデーション
線形グラデーションは createLinearGradient() メソッドを使って描画される。引数ではグラデーションの開始点（x, y）と終了点（x2, y2）を指定する。
createLinearGradient(x, y, x2, y2);
y, y2 の値を両方 0 にすると水平方向のグラデーション、x, x2 を両方 0 にすると垂直方向のグラデーションになる。
// 水平方向 createLinearGradient(0, 0, 100, 0); // 垂直方向 createLinearGradient(0, 0, 0, 100); // 垂直方向 createLinearGradient(0, 0, 100, 100);
addColorStop を使用することで、グラデーションの色の変化を制御することができる。
グラデーションの開始点から終了点を 0 ~ 1.0 で表し、最初の引数でどの地点に色を挟むか指定する。第二引数では適用したい色を指定する。
addColorStop(stop, color);
Demo: http://jsfiddle.net/thleap/qk1zs3ra/1/
function drawScreen() { var gr = context.createLinearGradient(0, 0, 100, 0); gr.addColorStop(0, 'red'); gr.addColorStop(.5, 'yellow'); gr.addColorStop(1, 'red'); context.fillStyle = gr; context.fillRect(0, 0, 100, 100); }
また、一度グラデーションを設定した後は新たな色の指定をしない限り、後に続く他の図形にもグラデーションが適用されることを注意しておきたい。
グラデーションの範囲を超える部分については最後の色（ここでは赤）で塗りつぶされることになる。
Demo: http://jsfiddle.net/thleap/qk1zs3ra/2/
function drawScreen() { var gr = context.createLinearGradient(0, 0, 100, 0); gr.addColorStop(0, 'red'); gr.addColorStop(.5, 'yellow'); gr.addColorStop(1, 'red'); context.fillStyle = gr; context.fillRect(0, 0, 100, 100); context.fillRect(0, 100, 50, 100); context.fillRect(0, 200, 200, 100); }
輪郭（線）へのグラデーションの適用
グラデーションは図形の輪郭や線にも適用することができる。
Demo: http://jsfiddle.net/thleap/qk1zs3ra/3/
function drawScreen() { var gr = context.createLinearGradient(0, 0, 100, 0); gr.addColorStop(0, 'red'); gr.addColorStop(.5, 'yellow'); gr.addColorStop(1, 'red'); context.strokeStyle = gr; context.strokeRect(0, 0, 100, 100); context.strokeRect(0, 100, 50, 100); context.strokeRect(0, 200, 200, 100); }
複合図形（パスでの描写）にも適用できる。
Demo: http://jsfiddle.net/thleap/qk1zs3ra/4/
function drawScreen() { var gr = context.createLinearGradient(0, 0, 100, 0); gr.addColorStop(0, 'red'); gr.addColorStop(.5, 'yellow'); gr.addColorStop(1, 'red'); context.strokeStyle = gr; context.beginPath(); context.moveTo(0, 0); context.lineTo(50, 0); context.lineTo(100, 50); context.lineTo(50, 100); context.lineTo(0, 100); context.lineTo(0, 0); context.stroke(); }
円形グラデーション
円形グラデーションは createRadialGradient() メソッドを使って定義する。
前後 3つの引数（x座標、y座標、円の半径）を 1セットとして、開始円と終了円を指定する。x座標と y座標では円の中心点を決める。
createRadialGradient(x, y, radius, x2, y2, radius2);
Demo: http://jsfiddle.net/thleap/qk1zs3ra/5/
function drawScreen() { var gr = context.createRadialGradient(50, 50, 25, 50, 50, 100); gr.addColorStop(0, 'red'); gr.addColorStop(.5, 'yellow'); gr.addColorStop(1, 'red'); context.fillStyle = gr; context.fillRect(0, 0, 200, 200); } var gr = context.createRadialGradient(50, 50, 25, 50, 50, 100); gr.addColorStop(0, 'rgb(255, 0, 0)'); gr.addColorStop(.5, 'rgb(0, 255, 0)'); gr.addColorStop(1, 'rgb(255, 0, 0)'); context.fillStyle = gr; context.fillRect(0, 0, 200, 200);
HTML5、これからとかとか
第52回HTML5とか勉強会に参加してきた。
勉強会の様子は動画で観れる。
矢倉さんのセッションだけそれなりにメモを取っていたので載せておく。
これもスライドの内容そのままというわけではなく、自分の解釈を途中に挟みながら書いているので、資料が公開されればそれを見たほうが良いと思う。
HTML5 これまでの経緯とこれから
HTML5 は今後どうなっていくのか。開発者はどのようにしていかなければいけないのか。
暖色の円をランダムに並べる
ドットインストールの「HTML5 Canvas入門」レッスンをやってる。
15回、16回でランダムな大きさ・色の円を透過させて並べるというのをやったけど、これの色を暖色に限定して並べるようにしてみた。
それがこちら:
色の指定方法を rgb から hsl に変えて、hue（色相）の値をランダムに変化させるようにした。
-20度から 80度という角度の範囲を指定するときにどうやれば良いのかわからなくなったけど、MDNに掲載されている「min から max までの乱数を返す関数」を使えばできた。
めでたし。
CHROMA, ソーシャルボタンのスタイル変更
はてなブログ、ソーシャルボタンのスタイルが変わったみたい。
このブログでは、ソーシャルボタンのサイズを無理やり変更していたので見た目が崩れた。
なので、幅や高さの指定を削除した。
ブログのテーマを作るときとかは、こういったこともあるので元のデザインを無理しない範囲で変更するのが良さそう。
このブログの場合は、ブログの購読ボタンあたりのスタイルもいつか崩れそうでこわい。
