Html5Canvas初探学习笔记(13)-图片变换

小满（bill man）个人原创，欢迎转载，转载请注明地址，小满（bill man）的专栏地址http://www.gxlcms.com/

代码如下：

var image = new Image();
image.src = "grossini.png";
image.onload = function(){
   context.drawImage(image,50,50);
   context.translate(100,100);
   context.drawImage(image,50,50);
} 

和图形操作一样，在平移之后，我们给的坐标值都会发生相应的偏移，同样的也可以使用矩阵方法来实现。代码如下：

var image = new Image();
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);
} 

代码如下：

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);
} 

代码如下：

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); 

代码如下 ;

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 旋转角。

以上就是Html5 Canvas初探学习笔记(13) -图片变换的内容，更多相关内容请关注PHP中文网（www.gxlcms.com）！

查看更多关于Html5Canvas初探学习笔记(13)-图片变换的详细内容...