- 1. Canvasで画像を描画する
- 2. スライド作成嫌いエンジニアのMarpとAIを用いたスライド作成
- 3. 【今更】ぷよぷよプログラミングやってみた
- 4. エンジニアのスキルシートがゲームみたいでかっこよかったので自分で自己紹介サイトを作ってみた
- 5. 【ブックマークレット】画面をスリープさせない
- 6. Gradioでhtmlファイルを読み込み、iframe(srcdoc)とgradio.HTMLで表示する方法
- 7. エンジニアマインド①〜質問する勇気〜
- 8. PowerShell HtmlAgilityPack ライブラリ
- 9. 【Rails・slim】link_toについて
- 10. 自己紹介文を少し変更
- 11. PythonとHTMLで作る簡単な画像アップロード画面
- 12. 【Query Builder：Expression】Use icons in a Web report (HTML + CSS)
- 13. 無重力を検知しモータを動かすシステム
- 14. PythonとHTMLで簡単に作れる！動的カレンダーアプリの作成方法
- 15. Chart.js を使用したグラフの表示確認手順
- 16. jQueryのメソッド
- 17. Docker版 Sorry Server の構築
- 18. PythonとHTMLで簡単な掲示板を作ろう：Flaskで始めるWebアプリ開発入門
- 19. trにdisplay:gridをつけてtableをレスポンシブ対応する
- 20. CSS入れ子を道草食べすぎながら理解する
Canvasで画像を描画する
# はじめに
Canvas API を使用すると、ブラウザ上で画像やテキストを描画できるのですが、画像を切り取ったり、拡大・縮小したり、マウスクリックした状態でドラッグして移動したり…
といった色々なことができます。https://developer.mozilla.org/ja/docs/Web/API/Canvas_API
弊社のいくつかのプロダクトでは、これらの技術を用いて合成画像を出力し、お客さんへ届けるという仕組みを構築しています。
本記事では、Canvas で画像を描画するための、非常に基本的な使い方を紹介します。
# まずは画像を描画する
canvas要素は、二次元描画コンテキストを提供します。
これは、図形、文字、画像、その他のオブジェクトを描画するのに使用します。https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D
今回、横と縦が300 * 400のねこちゃん画像を描画します。
描画される範囲（枠）のサイズは広めの800 * 600としておきます。`
スライド作成嫌いエンジニアのMarpとAIを用いたスライド作成
# スライド
今回、Marp, Claude Sonnet3.5を用いてスライド作成する話をスライドとしてMarpの勉強がてらMarpでまとめました。
スライドの最後の方に生成AIを用いてスライドを作成している部分があります。
（この記事の最後には生成AIで生成したMarpのスライドフルバージョン載せてます）
またMarkdownや短いですがプロンプトなどもGitHubに挙げているのでよければ見てください。
[生成の元にした記事はこちら]
– https://qiita.com/i-yuporon/items/aa799b1729f224d8d178[GitHub]
– https://github.com/Inoue416/learn-marp/blob/main/README.md[SlideShare]
– https://www.slideshare.net/slideshow/marp-ai-claude-sonnet3-5-d7e4/270577004