20210106 【新年LT初め】オタクが最新技術を追うLTイベント#20【オンライン】 Canvasで"キャラシ"を作成！

1. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
Copyright (C) 2021 Toranoana Inc. All Right Reserved.
Canvasで
“キャラシ”を作成！
2021/01/06
フリーテーマLT
株式会社 虎の穴ラボ
河野 裕隆

2. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
Copyright (C) 2021 Toranoana Inc. All Right Reserved.
名前
河野 裕隆（コウノ ヒロタカ）
担当業務
クリエイティア
今季期待のアニメ
のんのんびより
2
自己紹介

3. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
Copyright (C) 2021 Toranoana Inc. All Right Reserved.
• 何を作ったか
• 作り方
– 技術的な話
• 今後
• まとめ
アジェンダ
3

4. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
Copyright (C) 2021 Toranoana Inc. All Right Reserved.
キャラクターシートって
ご存知ですか？
4

5. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
Copyright (C) 2021 Toranoana Inc. All Right Reserved.
• TRPGをやっていて画像のキャラクター
シートがほしかった
• エンジニアのスキルシートもTRPG風に
見られたら面白そうだと思った
• Canvasの練習したかった
動機
5

6. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
Copyright (C) 2021 Toranoana Inc. All Right Reserved.
※PC - Chromeのみ確認
6
完成形
https://h-kono-it.github.io/

7. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
Copyright (C) 2021 Toranoana Inc. All Right Reserved.
• 背景画像
• プロフィール画像
• レーダーチャート
Chart.js
• 各種パラメータ
構成要素
7

8. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
Copyright (C) 2021 Toranoana Inc. All Right Reserved.
1. 背景画像を読み込み（MainCanvas）
2. レーダーチャートをCanvasで描画
MainCanvasに重ねる
3. プロフィール画像をCanvasで描画
MainCanvasに重ねる
4. パラメータをMainCanvasに描画
8
作り方

9. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
Copyright (C) 2021 Toranoana Inc. All Right Reserved.
CanvasでCanvasを読み込む
9
技術的な話
const ctx =
document.getElementById("canvas1").getContext("2d");
const canvas2 = document.getElementById("canvas2");
const ctx2 = canvas2.getContext("2d");
ctx2.font = "serif";
ctx2.fillText("テストです", 0, 0); // canvas2に書き込み
ctx.drawImage(canvas2, 0, 0); // canvas2を重ねる

10. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
Copyright (C) 2021 Toranoana Inc. All Right Reserved.
CanvasでImageを読み込む
10
技術的な話
const ctx =
document.getElementById("canvas1").getContext("2d");
const image = new Image();
image.src = "image.png";
image.onload = function () { // 画像が読み込まれてから
ctx.drawImage(image, 0, 0); // 画像を重ねる
}

11. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
Copyright (C) 2021 Toranoana Inc. All Right Reserved.
文字に白の外枠をつける
11
技術的な話
ctx.lineWidth = 3;
ctx.strokeStyle = "#FFF"; // 白
ctx.strokeText("テストです", 0, 0);
ctx.fillStyle = "#000"; // 黒
ctx.fillText("テストです", 0, 0);

12. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
Copyright (C) 2021 Toranoana Inc. All Right Reserved.
ダウンロード
12
技術的な話
const canvas = document.getElementById("canvas");
const link = document.createElement("a");
link.href = canvas.toDataURL(); // 直接画像のURLを発行
link.download = "ファイル名";
link.click();

13. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
Copyright (C) 2021 Toranoana Inc. All Right Reserved.
• UI改善
• バリデーションの追加
• リファクタリング
• 別のテンプレートへの切り替え
13
今後やりたいこと

14. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
Copyright (C) 2021 Toranoana Inc. All Right Reserved.
• Canvasで画像を合成するのは簡単
• Canvasを合成するのも簡単
• ただし座標指定が大変
– （例）ctx.fillText("テストです", 550, 600);
14
まとめ
https://h-kono-it.github.io/
https://github.com/h-kono-
it/h-kono-it.github.ioリポジトリ生成ページ