プロジェクトサイトリンク

中に入る。

ブログを特定しようとしましたが、適切な画像がないので、他のブログの文章を参考にして簡単な画像を見つけました.このような形で画像を追加する文章がたくさんありますが、もちろんこれらの画像を作成するサイトもありますが、私の検索?実力が限られているので、見つからない.🤔
そこで、これらの簡単な画像を作成するためにToy Projectを行うことにしました.

使用するテクノロジーと環境

Webページ形態

HTML, CSS, JavaScript

github pages

UIの配置

基本的なUIインタフェースのリファレンス、読み取り、ページ.
ヘッダー:ページヘッダー
TextContents(div):テキストを入力する領域
ImageOptionArea(div):画像サイズと背景色を設定する領域
FontOptionArea(div):フォントサイズ、色などを設定するための領域
PreviewArea(div):プレビュー
Footer(footer):ブログとgithubアドレスリンク

要点

ページがドラッグ＆ドロップされたり、値が変化したりした場合は、drawCanvas()関数を呼び出してプレビュー画像を描画します.

    // 값이 변경시 updateValue 함수 호출 하도록 설정
    canvasWidth.addEventListener("change", updateValue);
    canvasHeight.addEventListener("change", updateValue);
    canvasColor.addEventListener("change", updateValue);
    contents.addEventListener("change", updateValue);
    fontSize.addEventListener("change", updateValue);
    fontColor.addEventListener("change", updateValue);
    
    // 페이지가 로드시 실행
    window.onload = function () {
        drawCanvas();
    }

入力したテキストが複数行表示されないように、1行ずつ描画することにしました.

  function fillTextLine(context, text, x, y, fontSize) {
          var lines = text.split("\n");
          var lineCount = lines.length;

          // 여려줄일 시, 시작(맨 첫줄) y좌표값을 조절 하는 작업
          y = y - ((lineCount - 1) * fontSize) / 2;

          for (var i = 0; i < lines.length; i++) {
              context.fillText(lines[i], x, y);
              y += fontSize + fontSize / 10;
          }
      }

結果

はるかに足りないでしょう。😧

다운로드ボタンが存在しない.🤫 右クリックでダウンロードする方法です.
それ以外にstyleまたは例外を処理する部分が適用されます
これらの部分を学ぶと同時に一つずつ実現します

リファレンス

hilite.me - HTML Tag
http://www.tcpschool.com/html-tags/intro - HTML, JavaScript
https://www.w3schools.com/HTML 5 canvas fillText改行関連
https://202psj.tistory.com/1210生活コードgithub pages