网页上的放大镜怎么弄出来

来源：百度知道 编辑：UC知道 时间：2024/06/15 17:52:05
想把网页上的文字弄大

HTML5图片放大镜代码，实现了一个圆形框的图像放大镜效果；
使用了JavaScript和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,drawHei