こんにちは。
私のBart Chalkboard Generatorについてお話したいと思います。
シンプソンズシリーズをご存知の方も多いと思いますが、ほとんどすべての新しいスクリーンセーバーで、バートは教育委員会で次のような新しいことを書いたことを覚えています。 また、インターネットでは、「ダンプの質問をする前にグーグルを使用します」というテキストを含む画像がポップアップすることがよくあります。 そしてある日、私はそのような写真の簡単なジェネレーターを作成して、Html5でさえも練習してみませんか？
準備する
アイデアは、テンプレートに指定されたテキストを描画し、結果を保存できるようにするCanvasアプリケーションを作成することでした。
Photoshopでスプライトを作成することから始めました。 基礎として、私はインターネットから写真を撮り、それをボードとバートに分けました。
レンダリングスキームは次のとおりです。
- ボードを描く
- テキストを描く
- テキストの上にバートを描く
叙情的な余談
このミニプロジェクトに取り組み始めた頃には、たった1日しかjsに慣れていませんでした（2niversity.comの「Html5 games hackaton」を
訪れました ）。 私はずっとJSを学び始めたいと思っていましたが、どういうわけか考えもありませんでした。
HTML5＆JS
コードを完全に公開するつもりはありません。これには意味がないため、ソースコードは利用可能です。
Htmlでは、すべてが簡単です。
<canvas id='bart' width='500' height='310'></canvas>
jsでは、いくつかの変数を定義することから始めました
var canvas = document.getElementById('bart');
次に、メイン関数draw（text）を作成しました。
関数write（text、n、marginStep）を定義し、必要なパラメーターをコンテキストに割り当てます（ctx）
function draw(text){ marginTop = 36;
次に、指定されたパラメータを使用してテキストの長さが計算されます
textWidth = ctx.measureText(text).width;
その後、ボードが描かれます
ctx.drawImage(sprite, 0, 0, 500, 250, 0, 0, 500, 250);
その後、いくつかのシナリオがあります。 入力されたテキストの幅に応じて、スクリプトはフォントサイズを最適に調整して10行で描画します。テキストが非常に大きい場合は、2行で5回描画します。
if (textWidth > 0 && textWidth <= 220){
次は、
ここで
naxelから
取得した2行のテキストの出力です。彼に感謝します。
方法は、テキストが最初に単語で単語配列に分割され、次にスペースで一度に1つの単語が接着され、各接着の後に、結果の文字列の幅がチェックされます。
幅が450（ボードの幅）よりも大きい場合、この行はキャンバスに表示され、最後の単語が5回インデントされて40回追加されます。次に、2行目が単に接着され、5回も表示されます。
else if(textWidth > 500 && textWidth <= 700){
最後に、バートが描画されます。
ctx.drawImage(sprite, 498, 128, 80, 180, 406, 118, 80, 180);
それだけです。テキストフォームとボタンを固定するために残ります。
HTML
<form name='form_1' onsubmit='return false;' id='form_1'> <input name='inputText' id='inputText' type='text' maxlength='150' autocomplete='off' autofocus placeholder=' -, !'> <input id='writeIt' type='button' value='!'> <input id='downloadIt' type='button' class='center' value='!' > </form>
Js
document.getElementById('writeIt').onclick=function(e){draw(document.forms.form_1.elements.inputText.value)}; document.getElementById('form_1').onsubmit=function(e){
画像を保存する
画像を保存するために、toDataURL（ 'image / png'）を使用しました。 url canvas.toDataURL（ 'image / png'）で新しいウィンドウを開くだけです
document.getElementById('downloadIt').onclick=function(e){ ctx.drawImage(sprite, 9, 250, 142, 25, 17, 222, 142, 25);
おわりに
このすべてに約2泊2日かかりました。通常のプログラマーにとっては非常に長い時間がかかることを知っていますが、私はjsを学び始めたばかりなので、ほとんど自分に満足しています。
謝罪と言い訳。
コードに欠陥や欠点がある場合は申し訳ありません。 私は本当にすべてを美しく、正しくしようとしました。
申し訳ありませんが、投稿のデザインに問題がある場合は、これが最初の投稿です。
デモ
ここで
bart-gen.ruを
試すことができます。ソースはそこにあります。
すぐにはロードされません 非常に奇妙なルーターを介してオンラインになる私のホームサーバーに投稿されたので、待つ必要があります。ソース
誰かがこれを読むことに興味を持っていたことを願っています
ご清聴ありがとうございました！
