鼠标 1.操作canvas 中的 img。 右键放大缩小，左键移动img。
2.拖动input type= range 改变图片的透明度
html 代码
<!DOCTYPE html> <html lang="en" oncontextmenu="doNothing()"> <head> <meta charset="UTF-8"> <title>图片已中心店的坐标缩放</title> <style> #box1 { 500px; height: 300px; border: 1px solid black; overflow: hidden; float: left; } #box2 { 500px; height: 300px; border: 1px solid black; overflow: hidden; float: left; margin-left: 50px; box-sizing: border-box; } </style> <script type="text/javascript">function ss() { if (event.button == 2) { alert("aaaa"); } document.onmousedown = ss; }</script> </head> <body> <div> <div id="box1"> <canvas id="cas1" width="500" height="300"></canvas> </div> <div id='box2'> <canvas id="cas2" width="500" height="300"></canvas> </div> <div style="clear: both"></div> </div> <input type="range" id="inp_d" value="0"> </body> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="./index.js"></script> </html>
js 代码
/** * Created by Administrator on 2018/7/6. */ function doNothing() { window.event.returnValue = false; return false; } var imgX = 0; var imgY = 0; var imgScale = 1; var val = 0; window.onload = function (event) { var count = [ {cas2: 'cas1', box2: '#box1,#box2', path: './2.jpg', callback: imgOnload_callbak, scale: methods,icon_img:'./4.jpg,./5.jpg',inp_id:'#inp_d,#inp_d'}, {cas2: 'cas2', box2: '#box1,#box2,',path: './3.jpg', callback: imgOnload_callbak, scale: methods,icon_img:'./5.jpg,./4.jpg',inp_id:'#inp_d,#inp_d'} ]; for (var i = 0; i < count.length; i++) { getElement(count[i].cas2, count[i].box2, count[i].path, count[i].callback, count[i].scale,count[i].icon_img,count[i].inp_id) } }; function getElement(cas_id, box_id, img_src, imgOnload_call, methods,icon_img,inp_id) { var canvas = document.getElementById(cas_id); var box = document.getElementById(box_id); var arr = box_id.split(','); var context = canvas.getContext('2d'); var img = new Image(); var img1 = new Image(); var img1_arr = icon_img.split(','); img.src = img_src; for(var i = 0; i < img1_arr.length;i++){ img1.src = img1_arr[i]; } imgOnload_call(img, context, canvas, img1); methods(arr, canvas, context, img,img1); inp_methods(inp_id,context,canvas,img,img1) } function imgOnload_callbak(img,context,canvas,img1) { img.onload = function () { context.globalAlpha = 1.0; context.drawImage(img, 0, 0); }; img1.onload = function (){ setTimeout(function(){ context.globalAlpha = 0; context.drawImage(img1,0,0,img1.width,img1.height,0,0,img1.width,img1.height); },50); } } function methods(elements, canvas, context, img,img1) { var img_y = 1; elements.forEach(function (item, i) { $(item).mousedown(function (event) { console.log(val); var e_btn = event.button; if (e_btn == 2) { var e_down_y = event.clientY; $(item).mousemove(function (event) { var e_move_y = event.clientY; if (e_move_y < e_down_y) { img_y *= 1.01; } else { img_y /= 1.01; } e_down_y = e_move_y; img_y = (img_y > 1) ? img_y : 1; canvas.style.transform = "scale(" + img_y + "," + img_y + ")" }); $(item).mouseup(function () { $(item).unbind('mousemove'); $(item).unbind('mouseup'); }) } else if (e_btn == 0) { var e_drag_down = { x: event.clientX, y: event.clientY }; $(item).mousemove(function (event) { var e_drag_move = { x: event.clientX, y: event.clientY }; var e_drag_distance = { x: e_drag_move.x - e_drag_down.x, y: e_drag_move.y - e_drag_down.y }; e_drag_down = e_drag_move; imgX += e_drag_distance.x; imgY += e_drag_distance.y; context.clearRect(0, 0, canvas.width, canvas.height); context.globalAlpha = 1.0; context.drawImage(img, 0, 0, img.width, img.height, (imgX / 5), (imgY / 5), img.width * imgScale, img.height * imgScale); context.globalAlpha = val; context.drawImage(img1, 0, 0, img1.width, img1.height, (imgX / 5), (imgY / 5), img1.width * imgScale, img1.height * imgScale); }); $(item).mouseup(function () { $(item).unbind("mousemove"); $(item).unbind('mouseup'); }) } }) }) } function inp_methods(inp_id,context,canvas,img,img1){ var inp_id_arr = inp_id.split(','); inp_id_arr.forEach(function(item,i){ $(item).on('input propertychange',function(){ val = $(item).val(); val = ( val < 0.1)? 0.1 : val/100; context.clearRect(0,0,canvas.width,canvas.height); context.globalAlpha = 1.0; context.drawImage(img,0,0,img.width, img.height, (imgX / 5), (imgY / 5), img.width * imgScale, img.height * imgScale); context.globalAlpha = val; context.drawImage(img1,0,0,img1.width, img1.height, (imgX / 5), (imgY / 5), img1.width * imgScale, img1.height * imgScale); }) }); }
有错误的地方，请大家帮忙 指正一下。谢谢！