区域医疗移动医疗影像解决方案--基于HTML5的PAC

当前位置 : 首页 > 网页制作 > html5 > 区域医疗移动医疗影像解决方案--基于HTML5的PAC

区域医疗移动医疗影像解决方案--基于HTML5的PAC

来源: 作者: 时间:2016-02-01 11:23
html页面主要代码:canvas id=imageCanvas canvasjavascript主要代码:复制代码1 2 var canvas=$( imageCanvas) get(0);3 var context=canvas getContext(2d);4 var oldX,oldY,newX,newY;5
页面主要代码: 
 
<canvas id="imageCanvas" ></canvas>
 javascript主要代码:
 
复制代码
 1  
 2 var canvas=$("#imageCanvas").get(0);
 3 var context=canvas.getContext("2d");
 4 var oldX,oldY,newX,newY;
 5 var enabled=false;
 6 canvas.onmousedown=function(event){
 7      enabled=true;
 8     oldX = event.clientX;//实际运用中要获取鼠标在元素中的相对位置,在此为了方便直接获取了event的clientX
 9     oldY = event.clientY;//实际运用中要获取鼠标在元素中的相对位置,在此为了方便直接获取了event的clientY
10      
11 };
12 canvas.onmouseup=function(event) {
13      enabled = false;
14 };
15 canvas.onmousemove=function(event) {
16     if (!enabled) {
17         return;
18     }
19     newX=event.clientX;//实际运用中要获取鼠标在元素中的相对位置,在此为了方便直接获取了event的clientX
20     newY=event.clientY;//实际运用中要获取鼠标在元素中的相对位置,在此为了方便直接获取了event的clientY
21     moveImage();
22     oldX=newX;
23     oldY=newY;
24 };
25 function moveImage(){
26     var moveX=(newX - oldX);
27     var moveY=(newY - oldY);
28     
29     
30     //图像移动
31     context.transform(1,0,0,1,moveX,moveY);
32     context.drawImage(image);
33 
34 }
Tag:
网友评论

<