区域医疗移动医疗影像基于HTML5的PACS--HTML5图像处

当前位置 : 首页 > 网页制作 > html5 > 区域医疗移动医疗影像基于HTML5的PACS--HTML5图像处

区域医疗移动医疗影像基于HTML5的PACS--HTML5图像处

来源: 作者: 时间:2016-02-01 11:23
html页面主要代码:canvas id=imageCanvas canvasjavascript主要代码:复制代码1 var canvas=$( imageCanvas) get(0);2 var context=canvas getContext(2d);3 var oldX,oldY,newX,newY;4 va
页面主要代码: 
 
<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 }
Tag:
网友评论

<