前提・実現したいこと

web上のポスター作成アプリを作っています。

発生している問題・エラーメッセージ

powerpointなどのように、入力したテキストの色を変えられる機能を搭載したいです。
<font color = "ここを選択できる"></font>　このような形になるのではないかと予測しました。
![

該当のソースコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>poster-create</title>
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <script src = "/send_url.js"></script>
  </head>
  <body>
    <header>
      <div class="container">
        <div class="header-left">

        </div>
        <div class="header-right">
          <div id="humMenu">
            <input id="humCheck" type="checkbox">
            <label id="humOpen" for="humCheck"><span class = "fa fa-bars fa-2x"></span></label>
            <label id="humClose" for="humCheck"></label>
            <nav>
              <ul class="inner">
                <li><a href="/">TOP</a></li>
                <li><a href="#">みる</a></li>
                <li><a href="#">・</a></li>
                <li><a href="#">・</a></li>
                <li><a href="#">・</a></li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </header>
    <div class="action-wrapper">
      <!-- <div id="sidebar">
        <aside>
          <h3>制作順序</h3>
          <ul>
            <li>1.モデル選択</li>
            <li>2.テキスト挿入</li>
            <li>3.テキストの彩色</li>
            <li>4.画像挿入＆保存</li>
            <li>5.お疲れ様でした</li>
          </ul>
        </aside>
      </div> -->
      <div class="container">
        <div class="heading">
          <h2>モデルをカスタマイズしよう。</h2>
        </div>
        <div class="edit">
          <div style="margin-bottom: 1em">
            <div class="FileBtn">
              YOUR FILE
              <input type="file" id = "input">
            </div>
          </div>
          <div>
            <img id="img">
          </div>
          <script type="text/javascript">
          document.querySelector('#input').addEventListener('change', (event) => {
            const file = event.target.files[0]
            // fileがundefinedの時にreader.readAsDataURL(file)がエラーになるため、
            // !fileがfalseの場合にreturnする。
            if (!file) return
            const reader = new FileReader()
            reader.onload = (event) => {
              document.querySelector('#img').src = event.target.result
            }
            reader.readAsDataURL(file)
          })
          </script>
          <div class="stuff">
            <div class="textBox">
            <input class="text" id = "a" type="textbox" onkeyup="this.setAttribute('value', this.value);" value=""/>
            <input class="text" id = "b" type="textbox" onkeyup="this.setAttribute('value', this.value);" value=""/>
            <input class="text" id = "c" type="textbox" onkeyup="this.setAttribute('value', this.value);" value=""/>
            </div>
          </div>
          <canvas id="rectangle" width="700" height="550"></canvas>
          <script type="text/javascript">
          //読み込み時に実行する
          onload = function() {
            /* 四角を描く */
            var rect_canvas = document.getElementById("rectangle");
            var rect_ctx = rect_canvas.getContext("2d");
            var rect_up = rect_canvas.getContext("2d");
            var rect_down = rect_canvas.getContext("2d");
            rect_ctx.beginPath();
            rect_up.beginPath();
            rect_down.beginPath();
            // 四角を描く(A4サイズ)
            rect_ctx.strokeRect(55, 20, 584.5, 413.5);
            rect_up.fillRect(95, 163, 500, 15);
            rect_down.fillRect(95, 288, 500, 15);
          }
          </script>
        </div>
        <div>
          <a href = "/poster-model-select" class="back">戻る</a>
          <a href = "#" class="save">保存</a>
          <a href = "/poster-finish" class = "next">次へ</a>
        </div>
      </div>
    </div>
  </body>
</html>

<canvas id="rectangle" width="700" height="550"></canvas>
          <script type="text/javascript">
          //読み込み時に実行する
          onload = function() {
            /* 四角を描く */
            var rect_canvas = document.getElementById("rectangle");
            var rect_ctx = rect_canvas.getContext("2d");
            var rect_up = rect_canvas.getContext("2d");
            var rect_down = rect_canvas.getContext("2d");
            rect_ctx.beginPath();
            rect_up.beginPath();
            rect_down.beginPath();
            // 四角を描く(A4サイズ)
            rect_ctx.strokeRect(55, 20, 584.5, 413.5);
            rect_up.fillRect(95, 163, 500, 15);
            rect_down.fillRect(95, 288, 500, 15);

            window.addEventListener('DOMContentLoaded', ()=>{
              document.querySelector('#btn').addEventListener('click',()=>{
                const ctx = document.getElementById('rectangle').getContext('2d');
                ctx.font = "48px serif";
                ctx.fillStyle = document.querySelector('#color').value;
                ctx.fillText(document.querySelector('.text').value, 10, 50);
              });
            });
          }
          </script>
          <div class="stuff">
            <div class="textBox">
            <input class="text" id = "a" type="text" onkeyup="this.setAttribute('value', this.value);" value=""/>
            <input class="text" id = "b" type="text" onkeyup="this.setAttribute('value', this.value);" value=""/>
            <input class="text" id = "c" type="text" onkeyup="this.setAttribute('value', this.value);" value=""/>
            </div>
          </div>
          <select id="color">
          <option value="black">黒</optioin>
          <option value="red">赤</optioin>
          <option value="blue">青</optioin>
          <option value="yellow">黄色</optioin>
          </select>
          <input type="button" id="btn" value="テキスト設定"><br>

よろしくお願いします。

行動規範の内容に同意します

回答2件

ベストアンサー

canvasで色のついた文字を描画するのでしたらctx.fillStyle を設定してください

javascript
1<canvas id="rectangle" width="700" height="550"></canvas>
2<script>
3var ctx = document.getElementById('rectangle').getContext('2d');
4ctx.font = "48px serif";
5ctx.fillStyle = 'red';
6ctx.fillText("Hello world", 10, 50);
7</script>

あとからテキスト追加

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  document.querySelector('#btn').addEventListener('click',()=>{
4    const ctx = document.getElementById('rectangle').getContext('2d');
5    ctx.font = "48px serif";
6    ctx.fillStyle = 'red';
7    ctx.fillText(document.querySelector('#txt').value, 10, 50);
8  });
9});
10</script>
11<input type="text" id="txt" value="Hello world">
12<input type="button" id="btn" value="テキスト設定"><br>
13<canvas id="rectangle" width="700" height="550"></canvas>

色も指定

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  document.querySelector('#btn').addEventListener('click',()=>{
4    const ctx = document.getElementById('rectangle').getContext('2d');
5    ctx.font = "48px serif";
6    ctx.fillStyle = document.querySelector('#color').value;
7    ctx.fillText(document.querySelector('#txt').value, 10, 50);
8  });
9});
10</script>
11<input type="text" id="txt" value="Hello world">
12<select id="color">
13<option value="black">黒</optioin>
14<option value="red">赤</optioin>
15<option value="blue">青</optioin>
16<option value="yellow">黄色</optioin>
17</select>
18<input type="button" id="btn" value="テキスト設定"><br>
19<canvas id="rectangle" width="700" height="550"></canvas>

投稿2021/12/22 00:46

編集2021/12/22 03:33

yambejp

総合スコア116724

josikikusokurae

2021/12/22 02:58 編集

この場合はアプリの使用者がテキストを入力することはできるのでしょうか？これだとデフォルトでテキストが表示されてしまいます。

yambejp

2021/12/22 03:06

あとから処理をしたいならそういうUIにすればいいです

josikikusokurae

2021/12/22 03:25

ありがとうございます。色が反映されないのですが、テキスト設定のボタンにはどのような意味があるのでしょうか？また、色もユーザーが変えられるようにするにはどうすれば良いでしょうか？無知ですみません。

yambejp

2021/12/22 03:34 編集

> テキスト設定のボタンにはどのような意味があるのでしょうか？ユーザーが設定するならトリガーが必要ですよね？ボタンをおしたら画像に文字が挿入されるんですけど、そういうことを希望しているのではない？逆に何をしたときにテキストを挿入するつもりなのでしょうか？もう少し仕様を詰めた方が良いと思います

josikikusokurae

2021/12/22 03:51 編集

少しいじってこういう形になっているのですが、ボタンを押しても何も変わりません。。何が原因でしょうか。教えてくださったような仕様にしようと思っています。

yambejp

2021/12/22 03:57 編集

> ボタンを押しても何も変わりませんちょっと状況がわかりませんが・・・私の提示したソースだけをHTMLにして表示してもなにもおこらないということですか？（一旦ご自身のソースは忘れてください）それと動作環境など質問文に追記してください

josikikusokurae

2021/12/22 04:07 編集

動きました！なるほどです。こういう形のものなんですね！私は、type = textの枠線をなくして、PowerPointのように打った文字がそのままcanvasのstrokerect内に表示されるというものを想定していました。では、type = textで打った文字に後から色をつけるというのは厳しいでしょうか？ type = textというのはinputで打ったという意味です。

行動規範の内容に同意します