<!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>
放大镜效果canvas
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 时间有限，先看问题吧： @安童鞋的这个动图太大了没有办法直接播放，我这里把它压缩了一下给大家看看： 你说巧不巧！正...
