canvas详解03-绘制图像和视频

简介: canvas详解03-绘制图像和视频

canvas 更有意思的一项特性就是图像操作能力。可以用于动态的图像合成或者作为图形的背景,以及游戏界面(Sprites)等等。浏览器支持的任意格式的外部图片都可以使用,比如 PNG、GIF 或者 JPEG。你甚至可以将同一个页面中其他 canvas 元素生成的图片作为图片源。


引入图像到 canvas 里需要以下两步基本操作:

  1. 获得一个指向HTMLImageElement的对象或者另一个 canvas 元素的引用作为源,也可以通过提供一个 URL 的方式来使用图片


  1. 使用drawImage()函数将图片绘制到画布上


我们来看看具体是怎么做的。


#获得需要绘制的图片


canvas 的 API 可以使用下面这些类型中的一种作为图片的源:


HTMLImageElement


这些图片是由 Image() 函数构造出来的,或者任何的 img 元素


HTMLVideoElement


用一个 HTML 的 video元素作为你的图片源,可以从视频中抓取当前帧作为一个图像

目录
相关文章
|
7月前
|
前端开发
canvas绘制圆环
canvas绘制圆环
|
5月前
|
前端开发
可以擦除Canvas的矩形的绘制
可以擦除Canvas的矩形的绘制
|
6月前
|
前端开发
canvas图像阴影处理
canvas图像阴影处理
|
7月前
|
Python
绘制你的图像-turtle
`turtle`是Python中的一个图形绘制库,源自1967年的Logo编程语言。它使用tkinter创建图形界面,让用户仿佛操控一支在画布上画画的笔。基本操作包括设置画笔颜色、填充、移动及旋转。示例代码展示了如何创建图形,如红黄相间的形状和太极图。turtle还可用于制作动画,如小球下落效果。此外,文中还给出了绘制玫瑰曲线、螺旋和扇子的代码示例。turtle是引导初学者学习编程的好工具。5月更文挑战第18天
62 0
|
7月前
|
前端开发
canvas详解04-绘制文字
canvas详解04-绘制文字
94 2
canvas详解04-绘制文字
|
7月前
|
缓存 前端开发 JavaScript
canvas详解01-绘制基本图形
canvas详解01-绘制基本图形
130 2
|
7月前
|
存储 前端开发
canvas详解05-变形
canvas详解05-变形
87 2
|
7月前
|
前端开发
canvas详解07-裁剪
canvas详解07-裁剪
71 1
|
7月前
|
存储 前端开发 索引
canvas详解09-像素操作
canvas详解09-像素操作
135 1
|
存储 前端开发 算法
canvas 处理图像(下)
canvas 处理图像(下)
canvas 处理图像(下)