<!DOCTYPE
html>
<
html lang="en">
<
head>
<
meta charset="UTF-8">
<
title>
Title</
title>
</
head>
<
body style="background:
black;">
<
canvas id="myCanvas" style="display:
block;margin:
0px auto;border:
10px solid #aaa ">
你的浏览器不支持canvas
</
canvas>
<
canvas id="offCanvas" style="display:
none"></
canvas>
<
script>
var myCanvas = document.
getElementById(
"myCanvas")
;
var context = myCanvas.
getContext(
"2d")
;
var offCanvas = document.
getElementById(
"offCanvas")
;
var offContext = offCanvas.
getContext(
"2d")
;
var isMouseDown = false;
var scale;
var image = new Image()
;
window.
onload = function () {
myCanvas.
width = 300;
myCanvas.
height = 200;
image.
src = "1.jpg";
image.
onload = function () {
offCanvas.
width = image.
width;
offCanvas.
height = image.
height;
scale = offCanvas.
width / myCanvas.
width ;
context.
drawImage(
image,0,0,myCanvas.
width,myCanvas.
height)
;
offContext.
drawImage(
image,0,0)
;
}
}
;
function windowToCanvas(x
,y) {
var bbox = myCanvas.
getBoundingClientRect()
;
return {
x : x
- bbox.
left , y : y
- bbox.
top}
;
}
myCanvas.
onmousedown = function (e) {
e.
preventDefault()
;
var point = windowToCanvas(e.
clientX , e.
clientY)
;
console.
log(
point)
;
isMouseDown = true;
drawCanvasWithMagnifier(
true , point )
;
}
;
myCanvas.
onmousemove = function (e) {
e.
preventDefault()
;
if (
isMouseDown ){
var point = windowToCanvas(e.
clientX , e.
clientY)
;
drawCanvasWithMagnifier(
true , point )
;
}
}
;
myCanvas.
onmouseup = function (e) {
e.
preventDefault()
;
isMouseDown = false;
drawCanvasWithMagnifier(
false )
;
}
;
myCanvas.
onmouseout = function (e) {
e.
preventDefault()
;
isMouseDown = false;
drawCanvasWithMagnifier(
false )
;
}
;
function drawCanvasWithMagnifier( isShowMagnifier
, point) {
context.
clearRect(
0,0,myCanvas.
width,myCanvas.
height)
;
context.
drawImage(
image,0,0,myCanvas.
width,myCanvas.
height)
;
if(isShowMagnifier
== true ){
drawMagnifier( point )
;
}
}
function drawMagnifier( point ) {
var imageLG_cx = point.
x * scale ;
var imageLG_cy = point.
y * scale ;
var mr = 20 ;
var sx = imageLG_cx - mr ;
var sy = imageLG_cy - mr ;
var dx = point.
x - mr ;
var dy = point.
y - mr ;
context.
save()
;
context.
lineWidth = 5.0;
context.
strokeStyle = "#069";
context.
beginPath()
;
context.
arc(point.
x,point.
y,mr,0,Math.
PI*2)
;
context.
stroke()
;
context.
clip()
;
context.
drawImage(
offCanvas,sx,sy,2*mr,2*mr,dx,dy,2*mr,2*mr)
;
context.
restore()
;
}
</
script>
</
body>
</
html>
转载请注明原文地址: https://www.6miu.com/read-76404.html
