湖中沉 发表于 2023-11-30 08:08:58

canvas的drawImage方法参数详解

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

一旦获得了源图对象,我们就可以使用 drawImage 方法将它渲染到 canvas 里。

drawImage 方法有三种形态:
drawImage(image, dx, dy) 在画布指定位置绘制原图
drawImage(image, dx, dy, dw, dh) 在画布指定位置上按原图大小绘制指定大小的图
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 剪切图像,并在画布上定位被剪切的部分


参数      描述
image      规定要使用的图像、画布或视频
sx      可选。开始剪切图片的 x 坐标位置
sy      可选。开始剪切图片的 y 坐标位置
sw      可选。被剪切图像的宽度(就是裁剪之前的图片宽度,这里的宽度若小于图片的原宽。则图片多余部分被剪掉;若大于,则会以空白填充)
sh      可选。被剪切图像的高度(就是裁剪之前的图片高度)
dx      在画布上放置图像的 x 坐标位置
dy      在画布上放置图像的 y 坐标位置
dw      可选。要使用的图像的宽度(就是裁剪之后的图片高度,放大或者缩放)
dh      可选。要使用的图像的高度(就是裁剪之后的图片高度,放大或者缩放)

页: [1]
查看完整版本: canvas的drawImage方法参数详解