转：canvas--放大镜效果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标事件</title>
</head>
<body>
<canvas id="canvas"></canvas>
<canvas id="offCanvas" style=" display: none;"></canvas>
<script>
var canvas=document.getElementById('canvas')
var context=canvas.getContext('2d')
var offcanvas=document.getElementById('offCanvas')
var offcontext=offcanvas.getContext('2d')
var image=new Image()
//鼠标左键是否被点击
var isMouseDown=false;
//定义缩放值
var scale
window.οnlοad=function(){
canvas.width="1030";
canvas.height='750';
image.src="timg.jpg"
//图片的原始尺寸要大于canvas的尺寸
image.οnlοad=function(){
offcanvas.width=image.width;
offcanvas.height=image.height
scale=offcanvas.width/canvas.width;
context.drawImage(image,0,0,canvas.width,canvas.height);
offcontext.drawImage(image,0,0)
}
//将屏幕的坐标转换为在canvas的坐标
function windowToCanvas(x,y){
//获取canvas距离浏览器周围的left和top值
var bbox=canvas.getBoundingClientRect();

return {x:x-bbox.left,y:y-bbox.top}
}
//鼠标按下
canvas.οnmοusedοwn=function(e){
e.preventDefault(e);
var point=windowToCanvas(e.clientX,e.clientY);
//console.log('point.left'+point.x+','+e.clientX+','+e.clientY)
   isMouseDown=true
   //绘制放大镜当onmouseup、onmouseout时 drawcanvasWithMagnifier传入false
   drawcanvasWithMagnifier(true,point)
}
//鼠标移动
canvas.οnmοusemοve=function(e){
e.preventDefault(e);
//需要查看鼠标的左键是否点击着如果没有点击则释放放大镜效果
//isMouseDown为true时显示放大镜
if(isMouseDown){
var point=windowToCanvas(e.clientX,e.clientY);
//console.log('point.left'+point.x+','+e.clientX+','+e.clientY)
drawcanvasWithMagnifier(true,point)
}
}
//鼠标松开
canvas.οnmοuseup=function(e){
e.preventDefault(e);
isMouseDown=false;
drawcanvasWithMagnifier(false)
}
//鼠标移开
canvas.οnmοuseοut=function(e){
e.preventDefault(e);
isMouseDown=false;
drawcanvasWithMagnifier(false)
}
function drawcanvasWithMagnifier(isMouseDown,point){
context.clearRect(0,0,canvas.width,canvas.height)
context.drawImage(image,0,0,canvas.width,canvas.height);
if(isMouseDown){
//绘制放大镜】
drawMagnifier(point)
}
}
function drawMagnifier(point){
//console.log('point.x'+point.x+'point.y'+point.y);
//鼠标点击的位置计算出在放大图像中的位置计算出大图的中心坐标
var imageLG_cx=point.x*scale
var imageLg_cy=point.y*scale
//放大镜显示的大小设置为200 放大镜的半径为200
var mr=200
//计算圆形的坐标和宽高
var sx=imageLG_cx-mr;
var sy=imageLg_cy-mr;
//用户可见的位置
var dx=point.x-mr;
var dy=point.y-mr;
context.save()
context.lineWidth=10.0;
context.strokeStyle='#069'
context.beginPath()
//圆形剪辑
context.arc(point.x,point.y,mr,0,Math.PI*2)
context.stroke();
context.clip();
context.drawImage(offcanvas,sx,sy,2*mr,2*mr,dx,dy,2*mr,2*mr);
context.restore()
}
}
</script>
</body>
</html>

转：canvas--放大镜效果相关推荐

练手小项目——canvas放大镜效果放大图片
参考:canvas之放大镜效果_WHTGS的博客-CSDN博客_canvas 放大镜效果: 代码: <!DOCTYPE html> <html lang="en" ...
html中放大镜案列,Canvas实现放大镜效果完整案例分析(附代码)
本文主要记录 canvas 在图像.文字处理.离屏技术和放大镜特效的实现过程中使用到的api.先看下效果吧: 一张模糊的图片: 鼠标点击任意位置,产生放大效果: 哇塞~ 一个帅哥,哈哈哈哈~ 1.放大 ...
canvas整体放大_【HTML5】Canvas 实现放大镜效果
图片放大镜效果原理首先选择图片的一块区域,然后将这块区域放大,然后再绘制到原先的图片上,保证两块区域的中心点一致, 如下图所示: 初始化获得 canvas 和 image 对象,这里使用标签 ...
Canvas实现放大镜效果
引言:大家都在淘宝上买过东西吧,应该都知道鼠标放到照片上时会将图片放大,这就是接下来要写的放大镜效果. 主要思路:其实很简单就是用drawImage这个方法来操作的,两个画布一个将原图绘制上去,另一个 ...
html放大镜原理,Canvas实现放大镜效果完整案例分析(附代码)
本文主要记录 canvas 在图像.文字处理.离屏技术和放大镜特效的实现过程中使用到的API.先看下效果吧: 一张模糊的图片: 鼠标点击任意位置,产生放大效果: 哇塞~ 一个帅哥,哈哈哈哈~ 1.放大 ...
html5 放大镜效果,JavaScript+HTML5 canvas实现放大镜效果完整示例
本文实例讲述了JavaScript+HTML5 canvas实现放大镜效果.分享给大家供大家参考,具体如下: 效果: www.jb51.net canvas放大镜 #copycanvas { bord ...
canvas之放大镜效果
利用canvas来实现放大镜效果很简单,而且效果相对于传统的js实现,更加流畅,体验效果更好.下面来具体实现一下(主要利用了canvas处理图片的相关方法): 1.整体的页面布局: 两个画布,一个存放 ...
android 放大镜动画,Android在图片上进行放大镜效果（放大镜形状）
Android 图片上放大镜效果实现 1.[文件] ZoomView.java ~ 5KB 下载(55) package com.study.hello; import android.con ...
js实现图片放大镜效果
效果图代码实现过程 html部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
canvas-实现放大镜效果
canvas-实现放大镜效果目录文章目录前言推荐阅读代码展示结果展示前言本文为canvas实现放大镜逻辑简单,适合作为基础项目练手推荐阅读 <H5 canvas核心技术> ...

转：canvas--放大镜效果

转：canvas--放大镜效果相关推荐

最新文章

热门文章