区域医疗移动医疗影像基于HTML5的PACS--HTML5图像处理(5)图像旋转

要查看此系统更多的图像处理功能请参考：

区域医疗移动医疗影像解决方案--基于HTML5的PACS--HTML5图像处理

html页面主要代码： 

canvas id="imageCanvas" > /canvas>

javascript主要代码：

复制代码

 1  VAR canvas=$("#imageCanvas").get(0);

 2  var context=canvas.getContext("2d");

 3  var oldX,newX;

 4  var enabled=false;

 5  canvas.onmousedown=function(event){

 6      enabled=true;

 7      oldX = event.clientX; //实际运用中要获取鼠标在元素中的相对位置，在此为了方便直接获取了event的clientX

 8       

 9  } ;

10  canvas.onmouseup=function(event) {

11       enabled = false;

12  } ;

13  canvas.onmouSEMove=function(event) {

14      if (!enabled) {

15          return;

16      }

17      newX=event.clientX; //实际运用中要获取鼠标在元素中的相对位置，在此为了方便直接获取了event的clientX

18      rotationImage();

19      oldX=newX;

20  } ;

21  //此函数是任何角度旋转

22  function rotationImage(){

23      var degree=(this.newX - this.oldX); //用X轴移动的距离表示旋转的度数。

24      //由于javascript中的函数Math.cos 和  math.sin 所涉及的参数是指的“弧度”而非“角度”,

25      //所以要把弧度转换成角度  转换公式 ：弧度＝度×π/180° 

26      degree=degree*Math.PI / 180; //把度转换为弧度

27      //图像旋转

28      context.transform(Math.cos(degree),Math.sin(degree),-Math.sin(degree),Math.cos(degree),0,0);

29      context.drawImage(image);

30  }

31  //按照运算公式，如果向右旋转90度着为：transform(0,1,-1,0,0,0);

32  //向左旋转90度为：transform(0,-1,1,0,0,0);

33  //旋转180度为：哈哈自己算吧。。。。。

复制代码

到此关于怎么进行图像移动，图像缩放，图像水平翻转，图像垂直翻转，图像旋转等功能在（1）-（5）章节中已经讲解完毕，但是在前面4个章节中就有人发邮件问过我怎么进行图像连续变化，即在图像移动或缩放的基础上在进行图像的旋转变化。。。在第（6）章节中将会单独的讲解下图像的叠加变换（其实也很简单也就是矩阵的运算，现在懒得写了，找时间在单独说下吧）。

要查看此系统更多的图像处理功能请参考：

区域医疗移动医疗影像解决方案--基于HTML5的PACS--HTML5图像处理

html页面主要代码： 

canvas id="imageCanvas" > /canvas>

javascript主要代码：

复制代码

 1  var canvas=$("#imageCanvas").get(0);

 2  var context=canvas.getContext("2d");

 3  var oldX,newX;

 4  var enabled=false;

 5  canvas.onmousedown=function(event){

 6      enabled=true;

 7      oldX = event.clientX; //实际运用中要获取鼠标在元素中的相对位置，在此为了方便直接获取了event的clientX

 8       

 9  } ;

10  canvas.onmouseup=function(event) {

11       enabled = false;

12  } ;

13  canvas.onmousemove=function(event) {

14      if (!enabled) {

15          return;

16      }

17      newX=event.clientX; //实际运用中要获取鼠标在元素中的相对位置，在此为了方便直接获取了event的clientX

18      rotationImage();

19      oldX=newX;

20  } ;

21  //此函数是任何角度旋转

22  function rotationImage(){

23      var degree=(this.newX - this.oldX); //用X轴移动的距离表示旋转的度数。

24      //由于javascript中的函数Math.cos 和  Math.sin 所涉及的参数是指的“弧度”而非“角度”,

25      //所以要把弧度转换成角度  转换公式 ：弧度＝度×π/180° 

26      degree=degree*Math.PI / 180; //把度转换为弧度

27      //图像旋转

28      context.transform(Math.cos(degree),Math.sin(degree),-Math.sin(degree),Math.cos(degree),0,0);

29      context.drawImage(image);

30  }

31  //按照运算公式，如果向右旋转90度着为：transform(0,1,-1,0,0,0);

32  //向左旋转90度为：transform(0,-1,1,0,0,0);

33  //旋转180度为：哈哈自己算吧。。。。。

复制代码

到此关于怎么进行图像移动，图像缩放，图像水平翻转，图像垂直翻转，图像旋转等功能在（1）-（5）章节中已经讲解完毕，但是在前面4个章节中就有人发邮件问过我怎么进行图像连续变化，即在图像移动或缩放的基础上在进行图像的旋转变化。。。在第（6）章节中将会单独的讲解下图像的叠加变换（其实也很简单也就是矩阵的运算，现在懒得写了，找时间在单独说下吧）。

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！