Successfully reported this slideshow.

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

0

Share

Loading in …3
×
1 of 14
1 of 14

More Related Content

More from 虎の穴 開発室

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

  1. 1. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴 Copyright (C) 2021 Toranoana Inc. All Right Reserved. Canvasで
 “キャラシ”を作成!
 2021/01/06 フリーテーマLT
 株式会社 虎の穴ラボ 河野 裕隆
  2. 2. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴 Copyright (C) 2021 Toranoana Inc. All Right Reserved. 名前 河野 裕隆(コウノ ヒロタカ) 担当業務 クリエイティア 今季期待のアニメ のんのんびより 2 自己紹介
  3. 3. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴 Copyright (C) 2021 Toranoana Inc. All Right Reserved. • 何を作ったか • 作り方 – 技術的な話 • 今後 • まとめ アジェンダ 3
  4. 4. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴 Copyright (C) 2021 Toranoana Inc. All Right Reserved. キャラクターシートって ご存知ですか? 4
  5. 5. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴 Copyright (C) 2021 Toranoana Inc. All Right Reserved. • TRPGをやっていて画像のキャラクター シートがほしかった • エンジニアのスキルシートもTRPG風に 見られたら面白そうだと思った • Canvasの練習したかった 動機 5
  6. 6. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴 Copyright (C) 2021 Toranoana Inc. All Right Reserved. ※PC - Chromeのみ確認 6 完成形 https://h-kono-it.github.io/
  7. 7. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴 Copyright (C) 2021 Toranoana Inc. All Right Reserved. • 背景画像 • プロフィール画像 • レーダーチャート Chart.js • 各種パラメータ 構成要素 7
  8. 8. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴 Copyright (C) 2021 Toranoana Inc. All Right Reserved. 1. 背景画像を読み込み(MainCanvas) 2. レーダーチャートをCanvasで描画 MainCanvasに重ねる 3. プロフィール画像をCanvasで描画 MainCanvasに重ねる 4. パラメータをMainCanvasに描画 8 作り方
  9. 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. 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. 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. 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. 13. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴 Copyright (C) 2021 Toranoana Inc. All Right Reserved. • UI改善 • バリデーションの追加 • リファクタリング • 別のテンプレートへの切り替え 13 今後やりたいこと
  14. 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リポジトリ生成ページ

×