バート黒板ジェネレーター

こんにちは。

私の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'); // canvas var ctx = canvas.getContext('2d'); //  canvas var sprite = new Image(); sprite.src = 'images/sprite.png'; // 
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、メイン関数draw（text）を作成しました。

関数write（text、n、marginStep）を定義し、必要なパラメーターをコンテキストに割り当てます（ctx）

 function draw(text){ marginTop = 36; //   line = ''; //  line function write(text, n, marginStep){ //    text    n      marginStep for (var i = 0; i < n; i++) { ctx.fillText(text, 250, marginTop); marginTop += marginStep; }; }; line = ''; ctx.fillStyle = '#fff'; ctx.textAlign = 'center'; ctx.font = '18px Flow';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、指定されたパラメータを使用してテキストの長さが計算されます

 textWidth = ctx.measureText(text).width;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その後、ボードが描かれます

 ctx.drawImage(sprite, 0, 0, 500, 250, 0, 0, 500, 250);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その後、いくつかのシナリオがあります。 入力されたテキストの幅に応じて、スクリプトはフォントサイズを最適に調整して10行で描画します。テキストが非常に大きい場合は、2行で5回描画します。

 if (textWidth > 0 && textWidth <= 220){ //  0-220  (tc   ) textCount = Math.floor(450/(textWidth + 5)); //       (     (+)) for (var tc = 0; tc < textCount; tc++){ //   line += text + ' '; }; line = line.slice(0, -1); //     write(line, 10, 20); // }else if(textWidth > 220 && textWidth <= 225){ //  221-225  (2   ) ctx.font = '15px Flow'; //  line = text + ' ' + text; //  write(line, 10, 20); // }else if(textWidth > 225 && textWidth <= 360 ){ //  226-360  (1   ) ctx.font = '20px Flow'; //  if (textWidth > 445){ //       ,  ,      ctx.font = '18px Flow'; textWidth = ctx.measureText(text).width; }; write(text, 10, 20); // }else if(textWidth > 360 && textWidth <= 450 ){ //  361-450 ,   (1     ) write(text, 10, 20); //   }else if(textWidth > 450 && textWidth <= 500){ // 451-500  (1   ) ctx.font = '15px Flow'; //  write(text, 10, 20); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次は、 ここでnaxelから取得した2行のテキストの出力です。彼に感謝します。

方法は、テキストが最初に単語で単語配列に分割され、次にスペースで一度に1つの単語が接着され、各接着の後に、結果の文字列の幅がチェックされます。

幅が450（ボードの幅）よりも大きい場合、この行はキャンバスに表示され、最後の単語が5回インデントされて40回追加されます。次に、2行目が単に接着され、5回も表示されます。

 else if(textWidth > 500 && textWidth <= 700){ // 501-700  2! var words = text.split(' '); //         words var countWords = words.length; //   if(countWords > 4){ for (var n = 0; n < countWords; n++) { //    countWords        1 ,   line   var testLine = line + words[n] + ' '; //   var testWidth = ctx.measureText(testLine).width;//     if (testWidth > 450) { //        write(line, 5, 40); // 5    40 ( )   36 line = words[n] + ' '; // line     }else { line = testLine; }; }; marginTop = 56; //   2  write(line, 5, 40); //    5    40( )      }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最後に、バートが描画されます。

  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){ // Enter draw(document.forms.form_1.elements.inputText.value); return false //   };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

画像を保存する

画像を保存するために、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); //  window.open(canvas.toDataURL("image/png"), " Bart's Chalkoard", "resizable=no,toolbar=no,menubar=no,location=no,scrollbars=no,status=no,width=530,height=340, left=400, top=120,"); //   . ctx.drawImage(sprite, 16, 226, 134, 18, 16, 226, 134, 18); //    };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

おわりに

このすべてに約2泊2日かかりました。通常のプログラマーにとっては非常に長い時間がかかることを知っていますが、私はjsを学び始めたばかりなので、ほとんど自分に満足しています。

謝罪と言い訳。

コードに欠陥や欠点がある場合は申し訳ありません。 私は本当にすべてを美しく、正しくしようとしました。

申し訳ありませんが、投稿のデザインに問題がある場合は、これが最初の投稿です。

デモ

ここでbart-gen.ruを試すことができます。ソースはそこにあります。

すぐにはロードされません 非常に奇妙なルーターを介してオンラインになる私のホームサーバーに投稿されたので、待つ必要があります。

ソース

• habrahabr.ru/post/119772/ Canvas FAQ
• Html5についてhtmlbook.ru/html5
• jsに関するjavascript.ruの Webサイト
• javascript.ru/forumフォーラムでは、vadim5juneというニックネームを持つ非常に親切で忍耐強い人が私を助けてくれました。
• html5canvastutorials.comの優れたキャンバスチュートリアル
• Googleのその他のささいなこと

誰かがこれを読むことに興味を持っていたことを願っています

ご清聴ありがとうございました！