Enviar búsqueda
Cargar
20210106 tora lab LT 『Canvasで"キャラシ"を作成!』
•
0 recomendaciones
•
265 vistas
虎の穴 開発室
Seguir
20210106 【新年LT初め】オタクが最新技術を追うLTイベント#20【オンライン】 Canvasで"キャラシ"を作成!
Leer menos
Leer más
Software
Denunciar
Compartir
Denunciar
Compartir
1 de 14
Descargar ahora
Descargar para leer sin conexión
Recomendados
FizzBuzzで学ぶJavaの進化
FizzBuzzで学ぶJavaの進化
虎の穴 開発室
Railsのデバッグ どうやるかを改めて確認する
Railsのデバッグ どうやるかを改めて確認する
虎の穴 開発室
虎の穴ラボ エンジニア採用説明資料 .pdf
虎の穴ラボ エンジニア採用説明資料 .pdf
虎の穴 開発室
Deno Deployと組み合わせるのに Upstashをおすすめしたい.pdf
Deno Deployと組み合わせるのに Upstashをおすすめしたい.pdf
虎の穴 開発室
toranoana.deno #6 アジェンダ 採用説明
toranoana.deno #6 アジェンダ 採用説明
虎の穴 開発室
Deno 向け WEB 開発用のツールを作ったので 紹介します
Deno 向け WEB 開発用のツールを作ったので 紹介します
虎の穴 開発室
Supabase Edge Functions と Netlify Edge Functions を使ってみる – 機能とその比較 –
Supabase Edge Functions と Netlify Edge Functions を使ってみる – 機能とその比較 –
虎の穴 開発室
GCPの画像認識APIの紹介
GCPの画像認識APIの紹介
虎の穴 開発室
Recomendados
FizzBuzzで学ぶJavaの進化
FizzBuzzで学ぶJavaの進化
虎の穴 開発室
Railsのデバッグ どうやるかを改めて確認する
Railsのデバッグ どうやるかを改めて確認する
虎の穴 開発室
虎の穴ラボ エンジニア採用説明資料 .pdf
虎の穴ラボ エンジニア採用説明資料 .pdf
虎の穴 開発室
Deno Deployと組み合わせるのに Upstashをおすすめしたい.pdf
Deno Deployと組み合わせるのに Upstashをおすすめしたい.pdf
虎の穴 開発室
toranoana.deno #6 アジェンダ 採用説明
toranoana.deno #6 アジェンダ 採用説明
虎の穴 開発室
Deno 向け WEB 開発用のツールを作ったので 紹介します
Deno 向け WEB 開発用のツールを作ったので 紹介します
虎の穴 開発室
Supabase Edge Functions と Netlify Edge Functions を使ってみる – 機能とその比較 –
Supabase Edge Functions と Netlify Edge Functions を使ってみる – 機能とその比較 –
虎の穴 開発室
GCPの画像認識APIの紹介
GCPの画像認識APIの紹介
虎の穴 開発室
【エンジニアの勉強法ハックLT- vol.7】ゲームから学んだ勉強のこと
【エンジニアの勉強法ハックLT- vol.7】ゲームから学んだ勉強のこと
虎の穴 開発室
GitHub APIとfreshで遊ぼう
GitHub APIとfreshで遊ぼう
虎の穴 開発室
通販開発部の西田さん「通販開発マネジメントの5ルール」
通販開発部の西田さん「通販開発マネジメントの5ルール」
虎の穴 開発室
社内DX推進!非エンジニア向けにプログラミング講座を実施してみた!
社内DX推進!非エンジニア向けにプログラミング講座を実施してみた!
虎の穴 開発室
セキュリティを強化しよう!CloudArmorの機能解説
セキュリティを強化しよう!CloudArmorの機能解説
虎の穴 開発室
JavaScript LT会 〜 React.js Node.js歓迎 〜 Deno で やってみるweb開発
JavaScript LT会 〜 React.js Node.js歓迎 〜 Deno で やってみるweb開発
虎の穴 開発室
Amplify Studioを使ってみた
Amplify Studioを使ってみた
虎の穴 開発室
いいテスト会 (スプリントレビュー) をやろう!
いいテスト会 (スプリントレビュー) をやろう!
虎の穴 開発室
【Saitama.js】Denoのすすめ
【Saitama.js】Denoのすすめ
虎の穴 開発室
虎の穴ラボ Tech day#3 チームで戦う!とらのあな通販冬の大感謝祭でのフロント開発について
虎の穴ラボ Tech day#3 チームで戦う!とらのあな通販冬の大感謝祭でのフロント開発について
虎の穴 開発室
【とらのあなラボ Tech Day #3】新規システムにおける技術選定〜GoとgRPCを採用した話〜
【とらのあなラボ Tech Day #3】新規システムにおける技術選定〜GoとgRPCを採用した話〜
虎の穴 開発室
虎の穴ラボ TechDay#3 フルリモート率100%!リモートワークを可能にするマネージメント
虎の穴ラボ TechDay#3 フルリモート率100%!リモートワークを可能にするマネージメント
虎の穴 開発室
【20220120 toranoana.deno#4】deno を使って「ログイン」するサービスを作る
【20220120 toranoana.deno#4】deno を使って「ログイン」するサービスを作る
虎の穴 開発室
【20220120 toranoana.deno#4】denoでffiの続き
【20220120 toranoana.deno#4】denoでffiの続き
虎の穴 開発室
虎の穴ラボ エンジニア採用説明資料
虎の穴ラボ エンジニア採用説明資料
虎の穴 開発室
虎の穴ラボにおけるリモートワークの働き方
虎の穴ラボにおけるリモートワークの働き方
虎の穴 開発室
【20211202_toranoana.deno#3】denoでFFI
【20211202_toranoana.deno#3】denoでFFI
虎の穴 開発室
Deno を aws fargate で動かす
Deno を aws fargate で動かす
虎の穴 開発室
【コードレビューLT資料】コード規約の策定会を実施した話
【コードレビューLT資料】コード規約の策定会を実施した話
虎の穴 開発室
ワーケーションを 体験してみて〜富山 ワーケーションモニターツアーに参加しました
ワーケーションを 体験してみて〜富山 ワーケーションモニターツアーに参加しました
虎の穴 開発室
Love witchcraft +27768521739 Binding love spell in Sandy Springs, GA |psychic...
Love witchcraft +27768521739 Binding love spell in Sandy Springs, GA |psychic...
chiefasafspells
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
masabamasaba
Más contenido relacionado
Más de 虎の穴 開発室
【エンジニアの勉強法ハックLT- vol.7】ゲームから学んだ勉強のこと
【エンジニアの勉強法ハックLT- vol.7】ゲームから学んだ勉強のこと
虎の穴 開発室
GitHub APIとfreshで遊ぼう
GitHub APIとfreshで遊ぼう
虎の穴 開発室
通販開発部の西田さん「通販開発マネジメントの5ルール」
通販開発部の西田さん「通販開発マネジメントの5ルール」
虎の穴 開発室
社内DX推進!非エンジニア向けにプログラミング講座を実施してみた!
社内DX推進!非エンジニア向けにプログラミング講座を実施してみた!
虎の穴 開発室
セキュリティを強化しよう!CloudArmorの機能解説
セキュリティを強化しよう!CloudArmorの機能解説
虎の穴 開発室
JavaScript LT会 〜 React.js Node.js歓迎 〜 Deno で やってみるweb開発
JavaScript LT会 〜 React.js Node.js歓迎 〜 Deno で やってみるweb開発
虎の穴 開発室
Amplify Studioを使ってみた
Amplify Studioを使ってみた
虎の穴 開発室
いいテスト会 (スプリントレビュー) をやろう!
いいテスト会 (スプリントレビュー) をやろう!
虎の穴 開発室
【Saitama.js】Denoのすすめ
【Saitama.js】Denoのすすめ
虎の穴 開発室
虎の穴ラボ Tech day#3 チームで戦う!とらのあな通販冬の大感謝祭でのフロント開発について
虎の穴ラボ Tech day#3 チームで戦う!とらのあな通販冬の大感謝祭でのフロント開発について
虎の穴 開発室
【とらのあなラボ Tech Day #3】新規システムにおける技術選定〜GoとgRPCを採用した話〜
【とらのあなラボ Tech Day #3】新規システムにおける技術選定〜GoとgRPCを採用した話〜
虎の穴 開発室
虎の穴ラボ TechDay#3 フルリモート率100%!リモートワークを可能にするマネージメント
虎の穴ラボ TechDay#3 フルリモート率100%!リモートワークを可能にするマネージメント
虎の穴 開発室
【20220120 toranoana.deno#4】deno を使って「ログイン」するサービスを作る
【20220120 toranoana.deno#4】deno を使って「ログイン」するサービスを作る
虎の穴 開発室
【20220120 toranoana.deno#4】denoでffiの続き
【20220120 toranoana.deno#4】denoでffiの続き
虎の穴 開発室
虎の穴ラボ エンジニア採用説明資料
虎の穴ラボ エンジニア採用説明資料
虎の穴 開発室
虎の穴ラボにおけるリモートワークの働き方
虎の穴ラボにおけるリモートワークの働き方
虎の穴 開発室
【20211202_toranoana.deno#3】denoでFFI
【20211202_toranoana.deno#3】denoでFFI
虎の穴 開発室
Deno を aws fargate で動かす
Deno を aws fargate で動かす
虎の穴 開発室
【コードレビューLT資料】コード規約の策定会を実施した話
【コードレビューLT資料】コード規約の策定会を実施した話
虎の穴 開発室
ワーケーションを 体験してみて〜富山 ワーケーションモニターツアーに参加しました
ワーケーションを 体験してみて〜富山 ワーケーションモニターツアーに参加しました
虎の穴 開発室
Más de 虎の穴 開発室
(20)
【エンジニアの勉強法ハックLT- vol.7】ゲームから学んだ勉強のこと
【エンジニアの勉強法ハックLT- vol.7】ゲームから学んだ勉強のこと
GitHub APIとfreshで遊ぼう
GitHub APIとfreshで遊ぼう
通販開発部の西田さん「通販開発マネジメントの5ルール」
通販開発部の西田さん「通販開発マネジメントの5ルール」
社内DX推進!非エンジニア向けにプログラミング講座を実施してみた!
社内DX推進!非エンジニア向けにプログラミング講座を実施してみた!
セキュリティを強化しよう!CloudArmorの機能解説
セキュリティを強化しよう!CloudArmorの機能解説
JavaScript LT会 〜 React.js Node.js歓迎 〜 Deno で やってみるweb開発
JavaScript LT会 〜 React.js Node.js歓迎 〜 Deno で やってみるweb開発
Amplify Studioを使ってみた
Amplify Studioを使ってみた
いいテスト会 (スプリントレビュー) をやろう!
いいテスト会 (スプリントレビュー) をやろう!
【Saitama.js】Denoのすすめ
【Saitama.js】Denoのすすめ
虎の穴ラボ Tech day#3 チームで戦う!とらのあな通販冬の大感謝祭でのフロント開発について
虎の穴ラボ Tech day#3 チームで戦う!とらのあな通販冬の大感謝祭でのフロント開発について
【とらのあなラボ Tech Day #3】新規システムにおける技術選定〜GoとgRPCを採用した話〜
【とらのあなラボ Tech Day #3】新規システムにおける技術選定〜GoとgRPCを採用した話〜
虎の穴ラボ TechDay#3 フルリモート率100%!リモートワークを可能にするマネージメント
虎の穴ラボ TechDay#3 フルリモート率100%!リモートワークを可能にするマネージメント
【20220120 toranoana.deno#4】deno を使って「ログイン」するサービスを作る
【20220120 toranoana.deno#4】deno を使って「ログイン」するサービスを作る
【20220120 toranoana.deno#4】denoでffiの続き
【20220120 toranoana.deno#4】denoでffiの続き
虎の穴ラボ エンジニア採用説明資料
虎の穴ラボ エンジニア採用説明資料
虎の穴ラボにおけるリモートワークの働き方
虎の穴ラボにおけるリモートワークの働き方
【20211202_toranoana.deno#3】denoでFFI
【20211202_toranoana.deno#3】denoでFFI
Deno を aws fargate で動かす
Deno を aws fargate で動かす
【コードレビューLT資料】コード規約の策定会を実施した話
【コードレビューLT資料】コード規約の策定会を実施した話
ワーケーションを 体験してみて〜富山 ワーケーションモニターツアーに参加しました
ワーケーションを 体験してみて〜富山 ワーケーションモニターツアーに参加しました
Último
Love witchcraft +27768521739 Binding love spell in Sandy Springs, GA |psychic...
Love witchcraft +27768521739 Binding love spell in Sandy Springs, GA |psychic...
chiefasafspells
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
masabamasaba
Direct Style Effect Systems -The Print[A] Example- A Comprehension Aid
Direct Style Effect Systems -The Print[A] Example- A Comprehension Aid
Philip Schwarz
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
SelfMade bd
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2
%+27788225528 love spells in Boston Psychic Readings, Attraction spells,Bring...
%+27788225528 love spells in Boston Psychic Readings, Attraction spells,Bring...
masabamasaba
What Goes Wrong with Language Definitions and How to Improve the Situation
What Goes Wrong with Language Definitions and How to Improve the Situation
Juha-Pekka Tolvanen
%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein
%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein
masabamasaba
%in Soweto+277-882-255-28 abortion pills for sale in soweto
%in Soweto+277-882-255-28 abortion pills for sale in soweto
masabamasaba
Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...
Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...
Bert Jan Schrijver
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
masabamasaba
Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...
Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...
Medical / Health Care (+971588192166) Mifepristone and Misoprostol tablets 200mg
WSO2CON2024 - It's time to go Platformless
WSO2CON2024 - It's time to go Platformless
WSO2
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
masabamasaba
WSO2CON 2024 - Building the API First Enterprise – Running an API Program, fr...
WSO2CON 2024 - Building the API First Enterprise – Running an API Program, fr...
WSO2
Architecture decision records - How not to get lost in the past
Architecture decision records - How not to get lost in the past
Papp Krisztián
WSO2CON 2024 - API Management Usage at La Poste and Its Impact on Business an...
WSO2CON 2024 - API Management Usage at La Poste and Its Impact on Business an...
WSO2
WSO2CON 2024 - Does Open Source Still Matter?
WSO2CON 2024 - Does Open Source Still Matter?
WSO2
WSO2CON 2024 - Freedom First—Unleashing Developer Potential with Open Source
WSO2CON 2024 - Freedom First—Unleashing Developer Potential with Open Source
WSO2
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
masabamasaba
Último
(20)
Love witchcraft +27768521739 Binding love spell in Sandy Springs, GA |psychic...
Love witchcraft +27768521739 Binding love spell in Sandy Springs, GA |psychic...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
Direct Style Effect Systems -The Print[A] Example- A Comprehension Aid
Direct Style Effect Systems -The Print[A] Example- A Comprehension Aid
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
%+27788225528 love spells in Boston Psychic Readings, Attraction spells,Bring...
%+27788225528 love spells in Boston Psychic Readings, Attraction spells,Bring...
What Goes Wrong with Language Definitions and How to Improve the Situation
What Goes Wrong with Language Definitions and How to Improve the Situation
%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein
%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein
%in Soweto+277-882-255-28 abortion pills for sale in soweto
%in Soweto+277-882-255-28 abortion pills for sale in soweto
Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...
Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...
Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...
WSO2CON2024 - It's time to go Platformless
WSO2CON2024 - It's time to go Platformless
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
WSO2CON 2024 - Building the API First Enterprise – Running an API Program, fr...
WSO2CON 2024 - Building the API First Enterprise – Running an API Program, fr...
Architecture decision records - How not to get lost in the past
Architecture decision records - How not to get lost in the past
WSO2CON 2024 - API Management Usage at La Poste and Its Impact on Business an...
WSO2CON 2024 - API Management Usage at La Poste and Its Impact on Business an...
WSO2CON 2024 - Does Open Source Still Matter?
WSO2CON 2024 - Does Open Source Still Matter?
WSO2CON 2024 - Freedom First—Unleashing Developer Potential with Open Source
WSO2CON 2024 - Freedom First—Unleashing Developer Potential with Open Source
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
20210106 tora lab LT 『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リポジトリ生成ページ
Descargar ahora