【圖像與視頻】HTML5 Canvas 圖像的縮放（自適應到canvas的大小）

我的處女作《Canvas系列教程》在我的Github上正在連載更新，希望能得到您的關注和支持，讓我有更多的動力進行創作。

教程介紹、教程目錄等能在README裏查閱。

傳送門：https://github.com/827652549/CanvasStudy

介紹

之前我們介紹了如何將一幅未經縮放的圖像繪製到canvas中。現在我們試着用drawImage()在繪製圖像的時候進行縮放。

在縮放之前，圖片是“撐出”canvas的尺寸的，點擊“縮放圖片”選框後縮放到canvas的寬高的位置。

在線演示 詳細代碼

小技巧：進行頁面渲染時不應首先考慮Canvas元素

Canvas規範裏說：如果有一個更合適的元素可以使用，那麼開發者就不應該考慮在HTML文檔中使用canvas元素 。