小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man
上一篇讲了图片的两种操作,读入和导出,而读入图片之后的画图片我们采用的是只有三个参数的drawImage,本篇将分别介绍5个参数,和9个参数的drawImage,其实最后一个函数很像j2me里面的drawRegion。首先介绍5个参数的可以调整图片大小的drawImage函数。
首先来看如下效果:
代码如下:
varimage=newImage();
image.src="grossini.png";
image.onload=function(){
context.drawImage(image,50,50);
context.drawImage(image,100,50,image.width*1.5,image.height*1.5);
context.drawImage(image,200,50,image.width*0.5,image.height*0.5);
context.drawImage(image,250,50,160,50);
}
在图片的onload函数中,我写了四个drawImage,其中后三个用的是5个参数的,效果很明显,一个把图片扩大1.5倍,一个把图片缩小为0.5,还有一个是非等比例的缩放。也就是说后两个参数是我们设定的我们要绘制的图片的宽高,当然,在正常情况下,只是等比例的缩放,你也可以指定其他宽度,比如最后一句的效果。
下面来介绍可以裁减的drawImage函数,首先来看参数介绍:
drawImage(图片,图片中裁减的起始x坐标,图片中裁减的起始y坐标,裁减区域宽度,裁减区域高度,所画位置x坐标,所画位置y坐标,所画图形宽度,所画图形高度)
首先来看如下效果:
代码如下:
varimage=newImage();
image.src="grossini.png";
image.onload=function(){
context.drawImage(image,50,50);
context.drawImage(image,0,0,image.width,image.height/3,100,50,image.width*1.5,image.height*0.5);
context.drawImage(image,0,image.height/3,image.width,image.height*2/3,180,50,image.width*1.5,image.height);
这个函数比刚才的多了一个裁减功能,可以让我们任意的裁减图片,经常被这样应用,效果如下:
代码如下:
vartest=newImage();
test.src="test.png";
test.onload=function(){
context.drawImage(test,50,180);
context.drawImage(test,67*3,0,67,121,50,280,67,121);
}
从本例显示,从一列大图中做简单小图的裁减是裁减的用途之一。
如有错误,希望大家多多指正
下一篇继续研究canvas中的图片变换
分享到:
相关推荐
html5-canvas-web-图片涂鸦
HTML5 Canvas生成粒子效果的人物头像html5-canvas-pixel-image-master.zip
html5-canvas-rabbit-run-games-code 3d游戏 适应手机和PC
html5-canvas-border-pixel-progressbar源码
wxml-to-canvas 小程序内通过静态模板和样式绘制 canvas ,导出图片,可用于生成分享图等场景
html5-canvas-3d-earth-rotate.zip
html5-canvas-3d-line-avatar.zip
html2canvas-1.0.0-rc.4版本
html5-canvas-520-love-cartoon-codes(jb51.net).rar
html5canvas 像素亮度调整
低版本HTML2canvas 前端开发 生成海报 截图等功能 1.该脚本允许您直接在用户浏览器上对网页或其部分进行“截图”。屏幕截图基于 DOM,因此可能不是 100% 准确到真实表示,因为它不会制作实际的屏幕截图,而是根据...
Html5-canvas之图片添加马赛克 Html5-canvas之图片添加马赛克
Leaflet.Canvas-Markers-0.2.0 https://github.com/corg/Leaflet.Canvas-Markers
ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...
HTML5+JS游戏开发模块----canvas图片拖放,炮塔攻击范围绘制,炮塔原本位置,炮塔图片的拖放
html2canvas 的 @1.0.0-rc.4 版本,兼容IOS13,npm install时候安装版本不对可以直接下载这个,选择dist内的js文件引入
之前我们分享过很多基于CSS3和HTML5 Cavans的3D立方体动画,有几款还是比较炫酷的,比如这款HTML5/CSS3 3D立方体拼图和这款CSS3 3D立方体图片墙 可拖拽360度旋转。这次我们要介绍的是一款基于HTML5 Canvas的3D立方体...
javascrip canvas画布,实现动态背景。
HTML5 Canvas 经典学习教程, HTML5 Canvas 经典学习教程-HTML5 Canvas Study,HTML5 Canvas Study,HTML5 Canvas Study
canvas-js-动画-例子