小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man
之前的图形变换中的那些操作的状态值,在图片操作里依然有用,虽然像缩放这样的操作我们在绘制的时候就可以实现,不过这依然是一种实现的方法
1.图片的平移,效果如下:
代码如下:
varimage=newImage();
image.src="grossini.png";
image.onload=function(){
context.drawImage(image,50,50);
context.translate(100,100);
context.drawImage(image,50,50);
}
和图形操作一样,在平移之后,我们给的坐标值都会发生相应的偏移,同样的也可以使用矩阵方法来实现。代码如下:
varimage=newImage();
image.src="grossini.png";
image.onload=function(){
context.drawImage(image,50,50);
context.transform(1,0,0,1,100,100);
//context.transform(0,1,1,0,100,100);
context.drawImage(image,50,50);
}
同样的,注掉的那句transform和没有注掉的transform效果是一样的,从整体上前四个参数负责缩放和旋转,后两个参数是平移,前四个参数1,4为一组控制缩放,2,3为一组控制旋转,1和2是x值,3和4是y值,5和6分别为x,y的平移,这里之所以要在1,4这组和2,3这组中的一组里写1,是因为我们要保证矩形不被缩放,如果是0的话则大小被缩放为0。
2.缩放图片
效果如下:
代码如下:
image.onload=function(){
context.drawImage(image,50,50);
context.translate(150,50);
context.scale(0.5,0.5);
context.drawImage(image,0,0);
}
同样的,需要配合平移和缩放,因为缩放之后,你的坐标位置也会作相应的缩放。也可以使用矩阵方法来实现相应的操作。
image.onload=function(){
context.drawImage(image,50,50);
context.transform(0.5,0,0,0.5,150,50);
context.drawImage(image,0,0);
}
就是1和4两个参数缩放0.5.
3.旋转
逆时针旋转,效果如下:
代码如下:
context.drawImage(image,50,50);
context.transform(-Math.sin(Math.PI/4),Math.cos(Math.PI/4),Math.cos(Math.PI/4),Math.sin(Math.PI/4),150,50);
context.drawImage(image,0,0);
两组参数分别为负的sin旋转角,cos旋转角,cos旋转角,sin旋转角。
顺时针旋转,效果如下:
代码如下;
context.drawImage(image,50,50);context.transform(Math.cos(Math.PI/4),Math.sin(Math.PI/4),-Math.sin(Math.PI/4),Math.cos(Math.PI/4),150,50);
context.drawImage(image,0,0);
两组参数分别为cos旋转角,sin旋转角,负的sin旋转角,cos旋转角。
如有错误,希望大家多多指正
下一篇继续研究canvas中的像素操作
分享到:
相关推荐
HTML5 Canvas生成粒子效果的人物头像html5-canvas-pixel-image-master.zip
html5-canvas-web-图片涂鸦
html5-canvas-rabbit-run-games-code 3d游戏 适应手机和PC
html5-canvas-border-pixel-progressbar源码
html5-canvas-3d-earth-rotate.zip
html5-canvas-3d-line-avatar.zip
html5-canvas-520-love-cartoon-codes(jb51.net).rar
ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...
html2canvas-1.0.0-rc.4版本
wxml-to-canvas 小程序内通过静态模板和样式绘制 canvas ,导出图片,可用于生成分享图等场景
Leaflet.Canvas-Markers-0.2.0 https://github.com/corg/Leaflet.Canvas-Markers
低版本HTML2canvas 前端开发 生成海报 截图等功能 1.该脚本允许您直接在用户浏览器上对网页或其部分进行“截图”。屏幕截图基于 DOM,因此可能不是 100% 准确到真实表示,因为它不会制作实际的屏幕截图,而是根据...
Html5-canvas之图片添加马赛克 Html5-canvas之图片添加马赛克
html2canvas 的 @1.0.0-rc.4 版本,兼容IOS13,npm install时候安装版本不对可以直接下载这个,选择dist内的js文件引入
HTML5+JS游戏开发模块----canvas图片拖放,炮塔攻击范围绘制,炮塔原本位置,炮塔图片的拖放
javascrip canvas画布,实现动态背景。
之前我们分享过很多基于CSS3和HTML5 Cavans的3D立方体动画,有几款还是比较炫酷的,比如这款HTML5/CSS3 3D立方体拼图和这款CSS3 3D立方体图片墙 可拖拽360度旋转。这次我们要介绍的是一款基于HTML5 Canvas的3D立方体...
canvas-js-动画-例子
HTML5 Canvas 经典学习教程, HTML5 Canvas 经典学习教程-HTML5 Canvas Study,HTML5 Canvas Study,HTML5 Canvas Study
判断浏览器是否支持canvas,具体代码如下: 复制代码代码如下: <!DOCTYPE html> <head> <meta charset=utf-8 /> <title>canvas</title> [removed] [removed] = function(){ /**判断...