HOMEJavaScript【Canvas】描画した画像をマウスホイールで拡大・縮小する【Canvas】描画した画像をマウスホイールで拡大・縮小する2022.01.24JavaScriptBこんにちは、ryohei(@ityryohei)です!本記事では、Canvasに描画した画像をマウスホイールで拡大・縮小する方法をご紹介しています。Canvasの画像をマウスホイールで拡大・縮小する処理を作りたいんだけど、どうすればいいんだろう?上記の疑問にお答えします。Canvasに画像を描画するCanvasに画像を描画します。Canvasに画像を描画するにはdrawImage()を使用します。drawImage()に指定することができる引数はいくつか種類がありますが、本記事では、描画に最低限必要なイメージの描画位置とサイズのみを指定します。height);各引数には下記の値を指定します。画像の高さ(ピクセル)試しにCanvasに画像を描画してみます。CodePen.実行結果の通り、Canvasに画像が描画されます。引数の値がどういった役割を持っているのか、座標値を変更したり、画像幅や高さを指定したりすると理解が深まるのでおすすめです。Canvasの画像を拡大・縮小するCanvasに画像を描画することができましたので、次は描画した画像を拡大・縮小してみます。拡大・縮小にはscale()を使用します。scale()は引数に指定した値(整数・少数)に応じて画像を拡大・縮小することができます。1.5)を実行して拡大してみます。CodePen.Canvasに描画された画像がscale()に指定した値て拡大されました。縮小する場合は少数を指定してくださいね。Canvasの画像をマウスホイールで拡大・縮小するCanvasのおさらいができたところで、マウスホイールにあわせて拡大・縮小する処理を作成します。JavaScriptが長くなってしまいましたので、各行にコメントを記載しています。実装される場合に参考にしていただければ幸いです。CodePen.マウスホイールの動きに応じて、Canvasに描画した画像が拡大・縮小していますね。Canvasについては下記ドキュメントに情報がつまってます。サンプルも豊富なので、実装時に参考にしていただければと思います。参考:https://developer.mozilla.org/ja/docs/Web/API/Canvas_API最後にCanvasは入門するまでは難しいように思えるAPIですが、いざ触ってみると楽しく学ぶことができ、JavaScript側からの操作にも対応しているため、CSSだけでは難しかった位置調整などが簡単にできたり、本記事で紹介した拡大・縮小なんかも簡単に実装することができます。今後使用する機会が増えていくAPIだと思いますので、扱えるようになっておくと良いかもしれないですね。以上、Canvasに描画した画像をマウスホイールで拡大・縮小する方法のご紹介でした!JavaScriptを基礎からしっかりと学びたい方へ下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。CC)はAdobe社が提供するクリエイター向けのサービスです。Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。CCの全20以上のアプリが使用できるプランです。コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。Webエンジニア福岡のWeb制作会社でエンジニアをしています。記事に関するご質問やご相談等ございましたら気軽にお問い合わせください。サービス・ツールSPEEC登録不要、無料で使えるビジネス書類作成サービスです。見積書~領収書までのPDFを一括で作成することができます。犬のごはん楽天市場で販売中の犬のごはんを好みの条件で簡単に絞り込むことができるドッグフード検索サイトです。HASHWordPressのログイン用にハッシュ化したパスワードを生成するツールです。DBからパスワードを変更する場合にご利用ください。Programご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が業務中に得た知識をアウトプットする場として2015年から運営しています。into-the-program.com。