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將彩色照片轉換成黑白照片