找回密码
 注册加入

扫一扫,极速登录

QQ登录

只需一步,快速开始

搜索
查看: 154|回复: 0

canvas的drawImage方法参数详解

[复制链接]
发表于 2023-11-30 08:08:58 | 显示全部楼层 |阅读模式
引言:
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        可选。要使用的图像的高度(就是裁剪之后的图片高度,放大或者缩放)

您需要登录后才可以回帖 登录 | 注册加入  

本版积分规则

Archiver|手机版|小黑屋|Discuz!扩展中心 - 杭州富迪文化艺术策划有限公司 版权所有 ( 浙ICP备14042422号-1 )|网站地图QQ机器人

GMT+8, 2024-7-12 22:49 , Processed in 0.188147 second(s), 16 queries , Gzip On, Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表