放大镜效果canvas

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
canvas {
    position: absolute
}
canvas #canvas1 {
    z-index: 1
}
canvas #canvas2 {
    z-index: 2;
    left: 0px;
    top: 0px;
    border: thin dashed black;
    display: none
}
</style>

</head>
<body onLoad="window_onload()">
<h1> 对图像使用放大镜</h1>
<canvas id="canvas1" width="360px" height="360px"></canvas>
<canvas id="canvas2" width="200px" height="200px"></canvas>
</body>
<!-----------------------下面是js---------------------------------------->
<script type="text/javascript">
    function window_onload()
    {
        //1.插入图片
        //1.1 首先获得原图的canvas元素
        var canvas1 = document.getElementById('canvas1');//获取显示原图的canvas元素
        context = canvas1.getContext('2d'); //获取显示原图的canvas元素的图形上下文对象
        var image = new Image();
        image.src = "./image/lADPDh0cOvMbjF_NAWjNAWg_360_360.jpg_720x720q90g.jpg";
        //1.4 绘制图像
        image.onload=function(){
            context.drawImage(image,0,0);
        }
        //2.鼠标移动到图片上方显示一个效果
        canvas1.onmousemove =
                canvas1_onmouse_move;
        //3.鼠标移出去显示另一个效果
        canvas1.onmouseout =
                canvas1_onmouse_out;
    }
    <!-----------------------总体函数---------------------------------------->
    function canvas1_onmouse_move(ev)
    {
        var canvas1,canvas2;//原图像使用的canvas元素与放大镜中图像使用的canvas元素
        var x,y;//鼠标在canvas元素中的相对坐标点
        var drawWidth,drawHeight;//鼠标所指区域的宽度与高度
        canvas1=document.
                getElementById("canvas1");//获取原图像使用的canvas元素
        canvas2=document.
                getElementById("canvas2");//获取放大镜中图像使用的canvas元素
        var context = canvas2.getContext('2d'); //获取放大镜中图像使用的canvas元素的图形上下文对象

        canvas2.style.display="inline"; //显示放大镜
        context.clearRect(0,0,canvas2.width,
                canvas2.height);//擦除放大镜中原图像
        canvas2.style.left=(ev.pageX+2)+"px";//设置放大镜在原图上的X轴上的坐标点
        canvas2.style.top=(ev.pageY+2)+"px";//设置放大镜在原图上的Y轴上的坐标点

        //获取放大镜图像的图像源
        var image = new Image();
        image.src = "./image/lADPDh0cOvMbjF_NAWjNAWg_360_360.jpg_720x720q90g.jpg";
        x=ev.pageX-canvas1.offsetLeft+2;//鼠标在canvas元素中X轴上的相对坐标点+2
        y=ev.pageY-canvas1.offsetTop+2;//+2是为了避免鼠标移动到放大镜上
        //获取鼠标所指区域的宽度
        if(x+200>canvas1.width)//如果鼠标所指区域的宽度超出原图宽度
            drawWidth=canvas1.width-x;//设置鼠标所指区域宽度为原图中剩余宽度
        else
            drawWidth=200;//设置鼠标所指区域的宽度为40像素
        //获取鼠标所指区域的高度
        if(y+200>canvas1.height)//如果鼠标所指区域的高度超出原图高度
            drawHeight=canvas1.height-y;//设置鼠标所指区域高度为原图中剩余高度
        else
            drawHeight=200;//设置鼠标所指区域的高度为40像素
        //放大2倍绘制放大镜图像
        context.drawImage(image,x,y,drawWidth,
                drawHeight,0,0,drawWidth*2,
                drawHeight*2);
    }
    <!-----------------------鼠标移动---------------------------------------->
    function canvas1_onmouse_out()
    {
        var canvas2=document.getElementById("canvas2");//获取放大镜所用canvas元素
        //重置canvas元素的位置

        //隐藏放大镜


    }
</script>
<!---------------------------鼠标移开----------------------------------->
</html>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容