html5图像放大镜代码解析+注释

2024-09-05 12:19:04

字体：大中小

来源：转载

供稿：网友

HTML5图片放大镜代码解析，实现了一个圆形框的图像放大镜效果。使用了JavaScript和HTML5中的Canvas来共同实现。本效果出自HTML5实例解析一书，因此来说面向HTML5初学者，丰富的注释会让你快速理解html5中canvas的使用方法，是相当不错的实例。

<!DOCTYPE html><head><meta charset="UTF-8"><title>HTML5对图像使用放大镜</title><script type="text/javascript">function window_onload(){    var canvas1 = document.getElementById('canvas1');//获取显示原图的canvas元素    if (canvas1 == null)        return false;    context = canvas1.getContext('2d'); //获取显示原图的canvas元素的图形上下文对象    //获取图像源    var image = new Image();    image.src = "tyl.jpg";    //绘制原图    image.onload=function(){        context.drawImage(image,0,0);    }    canvas1.onmousemove=canvas1_onmouse_move;//添加原图像获取鼠标焦点时的处理函数    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);//擦除放大镜中原图像    x=ev.pageX-canvas1.offsetLeft+2;//鼠标在canvas元素中X轴上的相对坐标点+2,+2是为了避免鼠标移动到放大镜上    y=ev.pageY-canvas1.offsetTop+2;//鼠标在canvas元素中Y轴上的相对坐标点+2,+2是为了避免鼠标移动到放大镜上    canvas2.style.left=(ev.pageX+2)+"px";//设置放大镜在原图上的X轴上的坐标点    canvas2.style.top=(ev.pageY+2)+"px";//设置放大镜在原图上的Y轴上的坐标点    //获取放大镜图像的图像源    var image = new Image();    image.src = "tyl.jpg";    //获取鼠标所指区域的宽度    if(x+40>canvas1.width)//如果鼠标所指区域的宽度超出原图宽度        drawWidth=canvas1.width-x;//设置鼠标所指区域宽度为原图中剩余宽度    else        drawWidth=40;//设置鼠标所指区域的宽度为40像素    //获取鼠标所指区域的高度    if(y+40>canvas1.height)//如果鼠标所指区域的高度超出原图高度        drawHeight=canvas1.height-y;//设置鼠标所指区域高度为原图中剩余高度    else        drawHeight=40;//设置鼠标所指区域的高度为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元素的位置    canvas2.style.left="0px";    canvas2.style.top="0px";    //隐藏放大镜    canvas2.style.display="none";}</script><style>canvas{    background-color:white;    position:absolute;}canvas#canvas1{    z-index:1;}canvas#canvas2{    z-index:2;    left:0px;    top:0px;    border:thin dashed black;    border-radius: 40px;    -moz-border-radius: 40px;    -o-border-radius: 40px;    -webkit-border-radius: 40px;    display:none;}</style></head><body onload="window_onload()"><h1>HTML5图像放大镜</h1><canvas id="canvas1" width="100px" height="130px"></canvas><canvas id="canvas2" width="80px" height="82px"></canvas></article></body></html>

上一篇：HTML5使用canvas元素绘制指针式动画时钟

下一篇：HTML5将彩色照片转换成黑白照片