Canvas实现拖拽放大镜

来源：互联网发布：软件安全在线检测编辑：程序博客网时间：2024/06/05 03:39

<!DOCTYPE html>

<html>

</canvas>

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>

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);

offC ontext.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>

0 0