您的位置：首页 > Web前端 > HTML5

Html5 canvas学习6-放大镜

2017-12-22 12:03 274 查看

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>

运行结果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5 canvas

相关文章推荐

新的分享

章节导航