- 积分
- 127833
- 在线时间
- 小时
- 注册时间
- 2010-9-23
- 最后登录
- 1970-1-1
|
引言:
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 可选。要使用的图像的高度(就是裁剪之后的图片高度,放大或者缩放)
|
|