没有合适的资源?快使用搜索试试~ 我知道了~
主要为大家详细介绍了js canvas实现放大镜查看图片功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
资源推荐
资源详情
资源评论
js canvas实现放大镜查看图片功能实现放大镜查看图片功能
主要为大家详细介绍了js canvas实现放大镜查看图片功能,具有一定的参考价值,感兴趣的小伙伴们可以参考
一下
本文实例为大家分享了canvas实现放大镜查看图片功能的具体代码,供大家参考,具体内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="background: black;">
<canvas id="myCanvas" style="display: block;margin: 0px auto;border: 10px solid #aaa ">
你的浏览器不支持canvas
</canvas>
<canvas id="offCanvas" style="display: none"></canvas>
<script>
var myCanvas = document.getElementById("myCanvas");
var context = myCanvas.getContext("2d");
var offCanvas = document.getElementById("offCanvas");
var offContext = offCanvas.getContext("2d");
var isMouseDown = false;
var scale;
var image = new Image();
window.onload = function () {
myCanvas.width = 300;
myCanvas.height = 200;
image.src = "1.jpg";
image.onload = function () {
offCanvas.width = image.width;
offCanvas.height = image.height;
scale = offCanvas.width / myCanvas.width ;
context.drawImage(image,0,0,myCanvas.width,myCanvas.height);
offContext.drawImage(image,0,0);
}
};
function windowToCanvas(x,y) {
var bbox = myCanvas.getBoundingClientRect();
return { x : x - bbox.left , y : y - bbox.top};
}
myCanvas.onmousedown = function (e) {
e.preventDefault();
var point = windowToCanvas(e.clientX , e.clientY);
console.log(point);
isMouseDown = true;
drawCanvasWithMagnifier( true , point );
};
myCanvas.onmousemove = function (e) {
e.preventDefault();
if (isMouseDown ){
var point = windowToCanvas(e.clientX , e.clientY);
drawCanvasWithMagnifier( true , point );
}
};
myCanvas.onmouseup = function (e) {
e.preventDefault();
isMouseDown = false;
drawCanvasWithMagnifier( false );
};
myCanvas.onmouseout = function (e) {
e.preventDefault();
isMouseDown = false;
drawCanvasWithMagnifier( false );
};
function drawCanvasWithMagnifier( isShowMagnifier , point) {
context.clearRect(0,0,myCanvas.width,myCanvas.height);
资源评论
weixin_38645266
- 粉丝: 4
- 资源: 948
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功