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

原创 2015年08月24日 14:57:57
<!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 可选。要使用的图像的高度。(伸展或缩小图像)

版权声明:本文为博主原创文章,未经博主允许不得转载。

html5 离屏canvas 的应用

离屏canvas在大多数的情况下是应用到html5 游戏中,但是最近接触到的一个项目是运用到绘制大量的图形上。 譬如有以下的需求,在一个固定的背景图上面绘制一个动态的时间。拿到这个需求,大部分搞过ht...
  • u012251421
  • u012251421
  • 2015年07月27日 15:20
  • 1802

离屏Canvas

离屏效果: 离屏非离屏并存效果 --> Image Clock body { backgro...
  • hb707934728
  • hb707934728
  • 2017年04月06日 10:43
  • 551

离屏Canvas——制作水印图片

您的浏览器尚不支持canvas 您的浏览器尚不支持canvas var canvas = document.get...
  • huangyibin628
  • huangyibin628
  • 2015年08月24日 15:01
  • 2196

canvas实现放大镜功能

采用canvas实现放大镜功能,只需要使用一个方法。。。 先奉上效果图: 先介绍该方法: drawImage() 这个方法有三种使用情况: 1、drawImage(img,x,y) 三...
  • qq_24849765
  • qq_24849765
  • 2016年03月17日 20:53
  • 1629

canvas实现放大镜效果

效果: html> html> head lang="en"> meta charset="UTF-8"> title>title> style> ...
  • liona_koukou
  • liona_koukou
  • 2017年04月12日 16:03
  • 352

html5--用canvas做个放大镜

做好这个转战CSS3 CSS: canvas{ background-color:white; position:absolute; } canvas#canvas1{ ...
  • liu506039293
  • liu506039293
  • 2015年09月01日 15:21
  • 830

Canvas放大镜效果

demo 放大镜+水印 *{ margin:0; ...
  • u011551941
  • u011551941
  • 2016年03月01日 13:29
  • 656

canvas实现放大镜

  • 2016年03月17日 20:25
  • 81KB
  • 下载

canvas实现放大镜功能

采用canvas实现放大镜功能,只需要使用一个方法。。。 先奉上效果图: 先介绍该方法: drawImage() 这个方法有三种使用情况: 1、drawImage(img,x,y) 三...
  • qq_24849765
  • qq_24849765
  • 2016年03月17日 20:53
  • 1629

Android 放大镜效果实现原理

通过事件分发机制和裁剪view实现类似放大镜效果。
  • csm_qz
  • csm_qz
  • 2015年12月20日 16:42
  • 2526
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:离屏Canvas——制作放大镜效果
举报原因:
原因补充:

(最多只允许输入30个字)