Html5 canvas学习6-放大镜

来源：互联网发布：最小的c语言软件编辑：程序博客网时间：2024/05/17 01:16

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>

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

阅读全文

0 0