素材巴巴 > 程序开发 >

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

程序开发 2023-09-04 21:38:43

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

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

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

介绍

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

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

在线演示 详细代码

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

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


标签:

上一篇: 在eclipse中如何导入springboot项目 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。