canvas 更有意思的一项特性就是图像操作能力。可以用于动态的图像合成或者作为图形的背景,以及游戏界面(Sprites)等等。浏览器支持的任意格式的外部图片都可以使用,比如 PNG、GIF 或者 JPEG。你甚至可以将同一个页面中其他 canvas 元素生成的图片作为图片源。
引入图像到 canvas 里需要以下两步基本操作:
- 获得一个指向HTMLImageElement的对象或者另一个 canvas 元素的引用作为源,也可以通过提供一个 URL 的方式来使用图片
- 使用drawImage()函数将图片绘制到画布上
我们来看看具体是怎么做的。
#获得需要绘制的图片
canvas 的 API 可以使用下面这些类型中的一种作为图片的源:
HTMLImageElement
这些图片是由 Image() 函数构造出来的,或者任何的 img 元素
HTMLVideoElement文章来源:https://www.toymoban.com/news/detail-502735.html
用一个 HTML 的 video元素作为你的图片源,可以从视频中抓取当前帧作为一个图像文章来源地址https://www.toymoban.com/news/detail-502735.html
到了这里,关于canvas详解03-绘制图像和视频的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!