canvas(五) 使用图像
canvas 具有操作图像的能力。可以用于动态的图像合成或者作为图像的背景，以及游戏界面(Sprites)。浏览器支持的任意外部图片格式都可以使用，还可以使用同一个页面中其他canvas元素生成的图片作为图片源。
引入图像到 canvas 里需要以下两部基本操作：
canvas 的API 可以使用下面这些类型中的一种作为图片的源：
HTMLImageElement
这些图片是由 Image() 函数构造出来的，或者任何的 <img> 元素
HTMLVideoElement
用一个HTML的 <video> 元素作为图片源，可以从视频中抓取当前帧作为一个图像
HTMLCanvasElement
可以使用另一个 <canvas> 元素作为图片源。
ImageBitmap
在 HTMLImageElement 上使用 crossOrigin 属性，可以请求加载其他域名上面的图片。
使用 document.getElementsByIdTagName 或者 document.getElementById 方法来获取其他 canvas 元素。
一旦获得了源图对象，我们就可以使用 drawImage 方法将它渲染到 canvas 里。 drawImage 方法有三种形态，最常见的是：
drawImage(image,x,y)
其中 image 是image 或者 canvas 对象，x/y是目标在 canvas里的起始坐标。
drawImage 的第二种形态，增加了两个用于控制图像在 canvas 中的参数。
drawImage(image,x,y,width,height)
这个方法多了2个参数： width 和 height ,这两个参数用来控制当 canvas 画入时应该缩放的大小。
drawImage 方法的第三个也是最后一个变种有8个新参数，用于控制做切片显示的。
drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight)
第一个参数是源图像引入，后面的前4个是定义图像源的切片位置和大小，后4个则是定义切片的目标显示位置和大小。
AiPPT
2024-09-19 广告
