您的位置：首页 > 其它

离屏Canvas——制作放大镜效果

2015-08-24 14:57 393 查看 
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body style="background: black;">

<canvas id="canvas" style="display:block;margin:0 auto;border:1px solid #aaa;">
您的浏览器尚不支持canvas
</canvas>

<canvas id="offCanvas" style="display: none">
</canvas>

<script>
var canvas = document.getElementById("canvas")
var context = canvas.getContext("2d")

var offCanvas = document.getElementById("offCanvas")
var offContext = offCanvas.getContext("2d")

var image = new Image()
var isMouseDown = false
var scale

window.onload = function(){

canvas.width = 1152
canvas.height = 768

image.src = "img-lg.jpg"
image.onload = function(){

offCanvas.width = image.width
offCanvas.height = image.height
scale = offCanvas.width / canvas.width

context.drawImage( image , 0 , 0 , canvas.width , canvas.height )
offContext.drawImage( image , 0 , 0 )
}
}

function windowToCanvas( x , y ){
var bbox = canvas.getBoundingClientRect()
return {x:x-bbox.left , y:y-bbox.top}
}

canvas.onmousedown = function(e){
e.preventDefault()
isMouseDown = true
point = windowToCanvas( e.clientX , e.clientY )
console.log( point.x , point.y )
drawCanvasWithMagnifier( true , point )
}

canvas.onmouseup = function(e){
e.preventDefault()
isMouseDown = false
drawCanvasWithMagnifier( false )
}

canvas.onmouseout = function(e){
e.preventDefault()
isMouseDown = false
drawCanvasWithMagnifier( false )
}

canvas.onmousemove = function(e){
e.preventDefault()
if( isMouseDown == true ){
point = windowToCanvas( e.clientX , e.clientY )
console.log( point.x , point.y )
drawCanvasWithMagnifier( true , point )
}
}

function drawCanvasWithMagnifier( isShowMagnifier , point ){

context.clearRect( 0 , 0 , canvas.width , canvas.height )
context.drawImage( image , 0 , 0 , canvas.width , canvas.height )
if( isShowMagnifier == true ){
drawMagnifier( point )
}
}

function drawMagnifier( point ){

var mr = 200

var imageLG_cx = point.x * scale
var imageLG_cy = point.y * scale

var sx = imageLG_cx - mr
var sy = imageLG_cy - mr

var dx = point.x - mr
var dy = point.y - mr

context.save()

context.lineWidth = 10.0
context.strokeStyle = "#069"

context.beginPath()
context.arc( point.x , point.y , mr , 0 , Math.PI*2 , false )
context.stroke()
context.clip()
context.drawImage( offCanvas , sx , sy , 2*mr , 2*mr , dx , dy , 2*mr , 2*mr )
context.restore()
}

</script>
</body>
</html>




context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);


参数值

参数描述
img规定要使用的图像、画布或视频。
sx可选。开始剪切的 x 坐标位置。
sy可选。开始剪切的 y 坐标位置。
swidth可选。被剪切图像的宽度。
sheight可选。被剪切图像的高度。
x在画布上放置图像的 x 坐标位置。
y在画布上放置图像的 y 坐标位置。
width可选。要使用的图像的宽度。（伸展或缩小图像）
height可选。要使用的图像的高度。（伸展或缩小图像）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航