【图像与视频】HTML5 Canvas 图像的缩放(自适应到canvas的大小)

我的处女作《Canvas系列教程》在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门:https://github.com/827652549/CanvasStudy

介绍

之前我们介绍了如何将一幅未经缩放的图像绘制到canvas中。现在我们试着用drawImage()在绘制图像的时候进行缩放。

在缩放之前,图片是“撑出”canvas的尺寸的,点击“缩放图片”选框后缩放到canvas的宽高的位置。

在线演示 详细代码

【图像与视频】HTML5 Canvas 图像的缩放(自适应到canvas的大小)

小技巧:进行页面渲染时不应首先考虑Canvas元素

Canvas规范里说:如果有一个更合适的元素可以使用,那么开发者就不应该考虑在HTML文档中使用canvas元素 。