Html5 canvas学习6-放大镜

最新推荐文章于 2023-09-22 14:35:47 发布

25King

最新推荐文章于 2023-09-22 14:35:47 发布

阅读量271

点赞数

分类专栏： web前端文章标签： html5 canvas

本文链接：https://blog.csdn.net/u012426959/article/details/78871850

版权

web前端专栏收录该内容

32 篇文章 0 订阅

订阅专栏

drawImage（）

这个方法有三种使用情况：
1、drawImage(img,x,y)
三个参数，第一个参数当然是img元素了，也可以是video元素或者Image对象，x 、y 为图片绘制时在画布中的起始坐标，图像大小与原图相同。
2、drawImage(img , x , y , w , h)
与第一中情况相比，多了两个参数，分别代表所绘图像的宽度和高度。
3、drawImage(img , sx , sy , sw , sh , dx , dy , dw , dh);
9个参数，分别是：图像元素，被复制区域在原画布中的起始横坐标、被复制区域在原画布中的起始纵坐标、被复制区域的宽度、被复制区域的高度、复制后目标图像在画布中的起始横坐标、复制后目标图像在画布中的起始纵坐标、复制后目标图像的宽度、复制后目标图像的高度。

实现思路

因此这种情况下可以将某幅图像的局部区域复制到另一个画布中的某个位置。

<!DOCTYPE html>
<html>
<head>
    <title>index</title>
    <style type="text/css">
    body{
        margin: 0;
        padding: 0;
        position: relative;
    }
    #imgcan{
        display: block;
        cursor: pointer;
    }
    #glasscan{
        display: none;
        border:1px solid #ccc;
        border-radius:101px;
        -webkit-border-radius:101px;
        -o-border-radius:101px;
        -moz-border-radius:101px;
        position: absolute;
    }
    </style>
</head>
<body>
<canvas id="imgcan" width="800" height="500"></canvas>
<canvas id="glasscan" width="200" height="200"></canvas>
<span id="show"></span>
</body>
<script type="text/javascript">
    var imgcan = document.getElementById("imgcan"),
        glasscan = document.getElementById("glasscan"),
        imgContext = imgcan.getContext("2d"),
        glassContext = glasscan.getContext("2d"),
        img = new Image(),
        mouse = captureMouse(imgcan);
    img.src = "http://img1.touxiang.cn/uploads/20121217/17-024911_660.jpg"
    img.onload = function(){
        imgContext.drawImage(img,0,0);
    }
    //获取元素内鼠标位置
    function captureMouse(element){
        var  mouse = {x:0 , y:0};
        element.addEventListener('mousemove' , function(event){
        var x , y;
        if(event.pageX || event.pageY){
            x = event.pageX;
            y = event.pageY;
        }else{
            x = event.clientX + (document.body.scrollLeft || 
            document.documentElement.scrollLeft);
            y = event.clientY + (document.body.scrollTop || 
            document.documentElement.scrollTop);
        }
        x -= element.offsetLeft;
        y -= element.offsetTop;
        mouse.x = x;
        mouse.y = y;
        } , false)
        return mouse;
    }
    //给画布绑定鼠标移动事件
    imgcan.onmousemove = function(){
            glassContext.clearRect(0,0,glasscan.width,glasscan.height);
            glasscan.style.left = mouse.x + 10 + 'px';
            glasscan.style.top = mouse.y + 10 + 'px';
            glasscan.style.display = "block";
            document.getElementById("show").innerText = mouse.x + '|' + mouse.y;     //显示鼠标位置
            var drawWidth = 50,
                drawHeight = 50;
            glassContext.drawImage(img,mouse.x-drawWidth/4,mouse.y-drawHeight/4,drawWidth,drawHeight,0,0,drawWidth*4,drawHeight*4);     //实现放大镜
    };
    //绑定鼠标移出事件
    imgcan.onmouseout = function(){
            glasscan.style.display = "none";
    }
</script>
</html>

运行结果：
这里写图片描述

25King

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html5 canvas学习6-放大镜

drawImage（）这个方法有三种使用情况： 1、drawImage(img,x,y) 三个参数，第一个参数当然是img元素了，也可以是video元素或者Image对象，x 、y 为图片绘制时在画布中的起始坐标，图像大小与原图相同。 2、drawImage(img , x , y , w , h) 与第一中情况相比，多了两个参数，分别代表所绘图像的宽度和高度。 3、drawIm
复制链接

扫一扫

专栏目录