脚本宝典收集整理的这篇文章主要介绍了html5教程-区域医疗移动医疗影像基于HTML5的PACS--HTML5图像处理(3)图像缩放，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 html页面主要代码： 

 

<canvas id="imageCanvas" ></canvas>

javascript主要代码：

 

复制代码

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

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

 3 var oldX,oldY,newX,newY;

 4 var enabled=false;

 5 canvas.onmousedown=function(event){

 6      enabled=true;

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

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

 9      

10 };

11 canvas.onmouseup=function(event) {

12      enabled = false;

13 };

14 canvas.onmousemove=function(event) {

15     if (!enabled) {

16         return;

17     }

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

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

20     multipleImage();

21     oldX=newX;

22     oldY=newY;

23 };

24 function multipleImage(){

25     var multiple=(newX + newY) - (oldX + oldY);

26     //图像缩放          

27     context.transform(multiple,0,0,multiple,0,0);

28     context.drawImage(image);

29 }

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

脚本宝典总结

以上是脚本宝典为你收集整理的html5教程-区域医疗移动医疗影像基于HTML5的PACS--HTML5图像处理(3)图像缩放全部内容，希望文章能够帮你解决html5教程-区域医疗移动医疗影像基于HTML5的PACS--HTML5图像处理(3)图像缩放所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。