今日よりちょっと賢い明日、今よりずっと自由な未来

Liberal Arts & IT

IT

canvasを使って表彰状作成サイトを作る

更新日:

思いっきり他サイトからのパクリですが、自分でもこんな表彰状作成サイトを作ってみました。

 誰でも表彰

表彰する人の指名、メッセージ、自分の名前、日付を入力する欄があります。
背景は英文の認定証と日文の感謝状の2種類。
感謝状背景はちょっとしょぼかったですね。。。
作成した表彰状は、png形式でダウンロードすることも可能です。

驚いたのはcanvasの機能の豊富さ。
名前の通り真っ白なキャンバスとして、画像を載せるも良し、文字を載せるも良し。
pngとして保存することもできちゃいます。

HTML, Javascript, cssしか使っていないので、コードはサイトから見られるかと思います。(https://triplearner.com/hyoushou/index.html

HTMLのcanvas部分はこれだけ

canvasのサイズを設定しています。
サイズは背景画像と同じサイズを指定しました。
これで真っ白な枠が完成したので、あとはJavaScript側でこの枠を認識して、文字や画像を入れていくだけです。

枠の認識

どちらの背景画像が選択されているかを確認。
選択が変更される度に再確認しています。

選択されている方の背景画像を描画
3行目のdrawImageでimgをcanvas内の左から0、上から0の一から描画することを支持しています。
resetCanvas()は文字を入力するための関数です。背景が切り替わった後も再度現在入力されている文字を読み直しています。

一部ですがresetCanvasの中身。
#receiverは「to whom?」の枠の名前です。この内容が書き換えられるたびにresetCanvas()が走るようになっています。
「ctx.fillText(chars[0] , 600, 400);」で文字入力です。

最後にダウンロード。その時のcanvasの内容をそのままpng化します。

ちなみに、HTMLでコメントアウトしてあるファイルアップロード機能を復活させると、推薦状に画像を1枚添付できます。
背景画像的に画像を追加する場所がなかったのでやめました。
JavaScriptだけで、ファイルをアップロードしなくてもプレビューさせたり、canvasに描画してダウンロードさせたりできるのは発見。

完成したサイトがこちら

 誰でも表彰

-IT

Copyright© Liberal Arts & IT , 2021 All Rights Reserved Powered by STINGER.