介绍 & lt; ! DOCTYPE html>
& lt; html>
& lt; head lang=癳n"祝辞
& lt;才能meta charset=癠TF-8"比;
& lt;才能title> www.jb51.net 帆布放大镜& lt;/title>
& lt;才能style>
,,,# copycanvas {
,,,,,边界:,1 px solid # 000;
,,,,,显示:,没有;
,,,}
,,,# square {
,,,,,宽度:,90 px;
,,,,,身高:,90 px;
,,,,,背景颜色:,# cc3;
,,,,,边界:,1 px solid # f00;
,,,,,不透明度:,0.5;
,,,,,位置:,绝对;
,,,,,z - index:, 999;
,,,,,显示:,没有;
,,,,,光标:,十字丝;
,,,}
& lt;才能/style>
& lt;/head>
& lt; body>
& lt; canvas id=癱anvas",宽度=?50“,身高=?76“祝辞& lt;/canvas>
& lt; canvas id=癱opycanvas",宽度=?00“,身高=?00“祝辞& lt;/canvas>
& lt; div id=皊quare"祝辞& lt;/div>
& lt; script>
var 才能;canvas =, . getelementbyid(& # 39;帆布# 39;),,//获取画布对象
,,,,,context =, canvas.getContext (& # 39; 2 d # 39;),,//获取上下文
,,,,,copycanvas =, . getelementbyid (& # 39; copycanvas& # 39;),,//获取copycanvas
,,,,,copycontext =, copycanvas.getContext (& # 39; 2 d # 39;),
,,,,,square =, . getelementbyid(& # 39;广场# 39;),,//获取透明框
,,,,,squaredata =,{},,//用来保存选择框数据
,,,,,box =, canvas.getBoundingClientRect ();//getBoundingClientRect才能方法可以获取元素上,下,左,右分别相对浏览器的坐标位置//才能创建图像对象,并加载
时间=image 才能;new 图像();
image.src =,才能“3. jpg";
image.onload 才能=,函数(){
,,,context.drawImage(形象,0,0 canvas.width canvas.height);
,,};
canvas.onmouseover 才能=,函数(e) {
,,,var x =, e.clientX,,//获取鼠标实时坐标
,,,,,,,y =, e.clientY;
,,,createSquare (x, y);,//保存透明选择框属性
,,};
window.onmousemove 才能=,函数(e) {
,,,var x =, e.clientX,
,,,,,,,y =, e.clientY;
,,,//判断鼠标是否移出画布
,,,如果(x 祝辞=,canvas.offsetLeft ,,, x & lt;=, canvas.offsetLeft +, canvas.width ,,
,,,,,,,y 祝辞=,canvas.offsetTop ,,, y & lt;=, canvas.offsetTop +, canvas.height) {
,,,,,createSquare (x, y);
还有,,,}{
,,,,,hideSquare ();
,,,,,hideCanvas ();
,,,}
,,}
function 才能;showSquare () {
,,,square.style.display =, & # 39;块# 39;;
,,}
function 才能;hideSquare () {
,,,square.style.display =, & # 39;没有# 39;;
,,}
function 才能;showCanvas () {
,,,copycanvas.style.display =,“inline";
,,}
function 才能;hideCanvas () {
,,,copycanvas.style.display =,“none";
,,}
function 才能;createSquare (x, y) {
,,,//控制选择框不移动出画布
,,,x =, x 作用;45,& lt;, canvas.offsetLeft ?, canvas.offsetLeft: x 作用;45;
,,,y =, y 作用;45,& lt;, canvas.offsetTop ?, canvas.offsetTop: y 作用;45;
,,,x =, x +, 90, & lt;, box.right ?, x: box.right 作用;90;
,,,y =, y +, 90, & lt;, box.bottom ?, y: box.bottom 作用;90;
,,,squaredata.left =, x;
,,,squaredata.top =, y;
,,,moveSquare (x, y);
,,}
function moveSquare才能(x, y) {
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章主要介绍JavaScript + HTML5使用帆布实现放大镜效果的示例,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
具体如下:
效果:
