Regional Medical mobile medical imaging solution-HTML5-based PACS--HTML5 Image Processing

Main html page code: <canvas id = "imageCanvas"> </canvas> javascript main code: Copy code 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; // in actual use, you need to obtain the relative position of the mouse in the element. In this way, you can directly obtain the clientX 9 oldY = event of the event. clientY; // obtain the relative position of the mouse in the element in actual use. In this way, the clientY10 11} of the event is obtained directly. 12 Canvas. onmouseup = function (event) {13 enabled = false; 14}; 15 canvas. onmousemove = function (event) {16 if (! Enabled) {17 return; 18} 19 newX = event. clientX; // in actual use, you need to obtain the relative position of the mouse in the element. In this way, you can directly obtain the clientX20 newY = event of the event. clientY; // in actual use, you need to obtain the relative position of the mouse in the element. In this way, you can directly obtain the clientY21 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 for image movement. transform (, moveX, moveY); 32 context. drawImage (image); 33 34}