[Category] TypeScript 全8件

canvas内で画像を読み込み、それを任意の形にトリミングしてからcanvas内に配置する。 See the Pen Untitled by nekuta (@nekuta) on CodePen. 角丸の四角を作る 処…

microCMS+Astroを使う機会があったのでメモ。スタイルまわりにはTailwindCSSを導入しています。 SDKを使ってmicroCMSの情報を取得する microCMSにはSDKがあるので、それを使って楽に情…

こちらではGoogleFontsを使いましたが、今回はディレクトリに設置したダウンロードフォントをcanvasで使うためのメモ。 呼び出し 関連

canvasでテキストを中央揃えするデモ。 canvasのテキストを中央配置する 参考サイト https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingCo…

canvasでGoogleFontsを使いたかったので、対応をメモ。GoogleFontsを読ませる部分の処理に関してはこちらの記事の方のコードをほぼまるっと使わせていただきました。ありがとうございます。 ちょっとつまず…

GWに何か面白いものを作れないかと思って、スマホの傾き角度によって画像を動かすデモを作成しました。用途は限られてきそうですが、ティザーサイトやLPなどの表現で使えるかも。実装はHTML、SCSS、TypeScript。ビ…

json-serverでモックサーバーを作っていきます。フロントエンドの開発中にAPIがまだ整備されていなかったりする時とかにサクッと作れて便利です。 まずはlocal環境づくり 今回はwebpackで作成していきます。…

何枚か合体しているPDFファイルをスライドショーで表示させるデモです。PDFをcanvasに表示させるためにPDF.jsを、スライドショーはSwiperを使用しています。 PDFをcanvasに書き出す PDF.jsをi…