区域医疗移动医疗影像基于HTML5的PACS--HTML5图像处理(3)图像缩放
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 }
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教程，巧夺天工，精雕玉琢。小宝典献丑了！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 区域医疗移动医疗影像基于HTML5的PACS--HTML5图像处理(3)图像缩放
本文地址： https://pptw.com/jishu/586380.html