20210106 tora lab LT 『Canvasで"キャラシ"を作成！』

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

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

虎の穴
• 何を作ったか
• 作り方
– 技術的な話
• 今後
• まとめ
アジェンダ
3

虎の穴
キャラクターシートって
ご存知ですか？
4

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

虎の穴
※PC - Chromeのみ確認
6
完成形
https://h-kono-it.github.io/

虎の穴
• 背景画像
• プロフィール画像
• レーダーチャート
Chart.js
• 各種パラメータ
構成要素
7

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

虎の穴
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を重ねる

虎の穴
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
技術的な話
ctx.lineWidth = 3;
ctx.strokeStyle = "#FFF"; // 白
ctx.strokeText("テストです", 0, 0);
ctx.fillStyle = "#000"; // 黒
ctx.fillText("テストです", 0, 0);

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

虎の穴
• UI改善
• バリデーションの追加
• リファクタリング
• 別のテンプレートへの切り替え
13
今後やりたいこと

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

20210106 tora lab LT 『Canvasで"キャラシ"を作成！』

Recommended

Recommended

More Related Content

More from 虎の穴開発室

More from 虎の穴開発室 (20)

Recently uploaded

Recently uploaded (20)