プログラミング

キャラクタは断念しました

20:56

こんにちは、ともです。

今回はPythonのWebアプリケーション用フレームワークのDjangoでブラウザから入力した文字を読みあげにキャラクタを追加します。

人型はあきらめました。ただ最近ちょっとだけ話題になったキャラクタを使用します。

これまでの内容については、以下を参照してください。

ブラウザで入力した文字を読み上げます（音声出力）

キャラクタ
1. canvas
2. javascript
まとめ

キャラクタ

人型はあきらめました。

面白いキャラクタはないかさがしたところスライムがいたので捕まえました。

以下を参考にしました。

https://stackoverflow.com/questions/36852215/drawing-a-slime-from-dragon-quest

canvas

canvasを使います。

    
<canvas id="chat_bot" width="600" height="400"></canvas>

javascript

嫌いなjavascriptを使います。

    
    <script type="text/javascript">
      /** スライムボディ */
      function bot_body(ctx, x, y, fillcolor) {
        ctx.translate(x, y); 
        ctx.save(); 
        ctx.beginPath(); 
        ctx.moveTo(109,0); 
        ctx.bezierCurveTo(111,64,199,3,198,123); 
        ctx.bezierCurveTo(199,139,183,192,99,190); 
        ctx.bezierCurveTo(66,193,-4,167,1,110); 
        ctx.bezierCurveTo(9,47,97,45,109,1); 
        ctx.fillStyle = fillcolor; 
        ctx.fill(); 
        ctx.strokeStyle = 'black'; 
        ctx.lineWidth = 2; 
        ctx.stroke(); 
        ctx.clip(); 
        ctx.shadowColor = 'black'; 
        ctx.shadowBlur = 15; 
        ctx.lineWidth = 1; 
        for(var i = 0; i < 8; i++) {
          ctx.stroke();
        } 
        ctx.restore();
      }
      

      /** スライムの目 */
      function eyes(ctx) {
        eye(ctx, 65,  87, 17, 10); 
        eye(ctx, 120, 90, 17, 10);
      }
      function eye(ctx, x, y, r1, r2) {
        ctx.clearRect(x, y, r1, r2);
        ctx.beginPath(); 
        ctx.arc(x,y,r1,0,Math.PI*2); 
        ctx.fillStyle='white'; 
        ctx.strokeStyle='black'; 
        ctx.fill(); 
        ctx.lineWidth=2; 
        ctx.stroke(); 

        ctx.beginPath(); 
        ctx.arc(x,y,r2,0,Math.PI*2); 
        ctx.fillStyle='black'; 
        ctx.fill(); 
      }

      /** 描画 */
      function main(ctx) {
        point_x = 250;
        point_y = 150;
        fill_color = 'rgb(63,187,255)';
        bot_body(ctx, point_x, point_y, fill_color);
        eyes(ctx);
      }
      /** メイン処理 */
      function init() {
        var canvas = document.getElementById("chat_bot");
        var ctx = canvas.getContext("2d");
        main(ctx);
      }
    </script>