Canvas實現拖拽放大鏡
<!DOCTYPE html>
<html>
<head lang="en“>
<title></title>
<canvas id="canvas" style="display:block;margin:0;auto:border:1px; solid #aaa;" >
</canvas>
<input type="range" id="scale-range" min="0.5" max="3.0: value="1.0" style="display:block;margin:20px;width:800px>
<script type="text /javascript">
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var slider=document.getElementById("range");
var scale=slider.value();
canvas.width=1080;
canvas.height=600;l
var image=new Image();
image.src=""bg.jpg;
image.onload=function(){
context.drawImage(image,0,0,canvas.width,canvas.height);
slider.onmousemove=function(){
scale=slider.value;
drawImageByScale(scale)
context.drawImage(image,0,0,canvas.width,canvas.height);
}
function drawImageByScale(scale){
var imageWidth=1080*scale;
var imageHeight=canvas.height*scale;
var x=canvas.width/2-imagewIdth/2;
var y=canvas.height/2-imageHeight/2;
context.clearRect(0,0,canvas.width,canvas.height);
context.drawImage(image,x,y,imageWidth,imgeHeight);
}
<!--
1設定canvase的高寬
2載入圖片到canvas物件上
3繫結拖拽時間
mousedows\mousemove\moseup\moueout
獲取另外一張圖片指定的部分徒刑，獲取會在到當前的canvas畫布上
4放大
繪製放大鏡，獲取另外一張圖片指定的部分圖形。
-->
}
</script>
<script type="text/javaxcrpt">
windows.onload=function(){
var canvas=docment.getElementById("canvas");
var context=canvas.getContext("2d");
canvas.width=1088;
canvas.height=620;
var image=new Image();
image.src="bg.jpg";
var isMouse
image.onload=function(){
offCanvas.width=image.height;
scale=offCanvas.width/canvas.width;
context.drawImage(image,0,0,canvas.width,canvas.height);
offContext.drawImage(iamge,0,0,offCanvas.width,offCanvas.height);
if(isMouseDown){
point=windowToCanvas(e.clientX,e.clientY);
}
function windowsToCanvas(x, y){\
var bbox=canvas.getBoundingClietnRect();
return {x:x-bbox.left,y:y-bbox.top};
}
}
function drawCanvasWidthManifier(isShow ,point ){
if(isShow){\
drawMangifier(point);
}
}
function drawMngifier(point){
var mr=200;
var imageFlg_cx=point.x*scale;
var imageFlg_cy=point.y*scale;
var sx=imageLg_cx-mr;
var dx=point.x-mr;
var dy=point.y-mr;
context.save();
context.lineWidth=5;
context.strokeStyle="fff";
context.beginPath();
context.arc();
context.arc(point.x,point.y,mr,0,Math.PI*2，false);
cont.stroke();
context.clip();
context.drawImage(offCanvas,sx,sy,2*mr,2*mr,dx,dy,2*mr,2*mr);\
}
canvas.onmousedown=function(){e.preventDefault();
isMouseDown=true;
drawCanvasWidthManifier(false);
}
}
var canvas=docment.getElementById("canvas");
var context=canvas.getContext("2d");
console.log(canvas);
</script>
</html>