本篇内容主要讲解“html中如何使用canvas实现离屏技术与放大镜效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“html中如何使用canvas实现离屏技术与放大镜效果”吧!

利用 canvas 除了可以实现滤镜，还可以利用 离屏技术 放大镜功能。

为了方便讲解，本文分为 2 个应用部分：

实现水印和中心缩放

实现放大镜

1. 什么是离屏技术？

canvas 学习和滤镜实现 介绍过 drawImage 接口。除了绘制图像，这个接口还可以： 将一个 canvas 对象绘制到另一个 canvas 对象上 。这就是离屏技术。

2. 实现水印和中心缩放

在代码中，有两个 canvas 标签。分别是可见与不可见。 不可见的 canvas 对象上的 Context 对象，就是我们放置图像水印的地方。

更多详解，请看代码注释：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>LearnCanvas</title><style>canvas{display:block;margin:0auto;border:1pxsolid#222;}input{display:block;margin:20pxauto;width:800px}</style></head><body><divid="app"><canvasid="my-canvas"></canvas><inputtype="range"value="1.0"min="0.5"max="3.0"step="0.1"><canvasid="watermark-canvas"></canvas></div><scripttype="text/javascript">window.onload=function(){varcanvas=document.querySelector("#my-canvas")varwatermarkCanvas=document.querySelector("#watermark-canvas")varslider=document.querySelector("input")varscale=slider.valuevarctx=canvas.getContext('2d')varwatermarkCtx=watermarkCanvas.getContext("2d")/*给第二个canvas获取的Context对象添加水印*/watermarkCanvas.width=300watermarkCanvas.height=100watermarkCtx.font="bold20pxArial"watermarkCtx.lineWidth="1"watermarkCtx.fillStyle="rgba(255,255,255,0.5)"watermarkCtx.fillText("===yuanxin.me===",50,50)/****************************************/varimg=newImage()img.src="./img/photo.jpg"/*加载图片后执行操作*/img.onload=function(){canvas.width=img.width;canvas.height=img.height;drawImageByScale(canvas,ctx,img,scale,watermarkCanvas);//监听input标签的mousemove事件//注意：mousemove实时监听值的变化，内存消耗较大slider.onmousemove=function(){scale=slider.valuedrawImageByScale(canvas,ctx,img,scale,watermarkCanvas);}}/******************/}/****@param{Object}canvas画布对象*@param{Object}ctx*@param{Object}img*@param{Number}scale缩放比例*@param{Object}watermark水印对象*/functiondrawImageByScale(canvas,ctx,img,scale,watermark){//图像按照比例进行缩放varwidth=img.width*scale,height=img.height*scale//(dx,dy):画布上绘制img的起始坐标vardx=canvas.width/2-width/2,dy=canvas.height/2-height/2ctx.clearRect(0,0,canvas.width,canvas.height)//No1清空画布ctx.drawImage(img,dx,dy,width,height)//No2重新绘制图像if(watermark){//No3判断是否有水印:有,绘制水印ctx.drawImage(watermark,canvas.width-watermark.width,canvas.height-watermark.height)}}</script></body></html>

实现效果如下图所示：


拖动滑竿，即可放大和缩小图像。然后右键保存图像。保存后的图像，就有已经有了水印，如下图所示：


3. 实现放大镜

在上述中心缩放的基础上，实现放大镜主需要注意以下 2 个部分：

细化处理canvas的鼠标响应事件：滑入、滑出、点击和松开

重新计算离屏坐标（详细公式计算思路请见代码注释）

重新计算鼠标相对于 canvas 标签的坐标（详细公式计算思路请见代码注释）

代码如下：

<!DOCTYPE html>

<htmllang="en"><head><metacharset="UTF-8"><title>Document</title><style>canvas{display:block;margin:0auto;border:1pxsolid#222;}</style></head><body><canvasid="my-canvas"></canvas><canvasid="off-canvas"></canvas><script>varisMouseDown=false,scale=1.0varcanvas=document.querySelector("#my-canvas")varoffCanvas=document.querySelector("#off-canvas")//离屏canvasvarctx=canvas.getContext("2d")varoffCtx=offCanvas.getContext("2d")//离屏canvas的Context对象varimg=newImage()window.onload=function(){img.src="./img/photo.jpg"img.onload=function(){canvas.width=img.widthcanvas.height=img.heightoffCanvas.width=img.widthoffCanvas.height=img.height//计算缩放比例scale=offCanvas.width/canvas.width//初识状态下,两个canvas均绘制Imagectx.drawImage(img,0,0,canvas.width,canvas.height)offCtx.drawImage(img,0,0,canvas.width,canvas.height)}//鼠标按下canvas.onmousedown=function(event){event.preventDefault()//禁用默认事件varpoint=windowToCanvas(event.clientX,event.clientY)//获取鼠标相对于canvas标签的坐标isMouseDown=truedrawCanvasWithMagnifier(true,point)//绘制在离屏canvas上绘制放大后的图像}//鼠标移动canvas.onmousemove=function(event){event.preventDefault()//禁用默认事件if(isMouseDown===true){varpoint=windowToCanvas(event.clientX,event.clientY)drawCanvasWithMagnifier(true,point)}}//鼠标松开canvas.onmouseup=function(event){event.preventDefault()//禁用默认事件isMouseDown=falsedrawCanvasWithMagnifier(false)//不绘制离屏放大镜}//鼠标移出canvas标签canvas.onmouseout=function(event){event.preventDefault()//禁用默认事件isMouseDown=falsedrawCanvasWithMagnifier(false)//不绘制离屏放大镜}}/***返回鼠标相对于canvas左上角的坐标*@param{Number}x鼠标的屏幕坐标x*@param{Number}y鼠标的屏幕坐标y*/functionwindowToCanvas(x,y){varbbox=canvas.getBoundingClientRect()//bbox中存储的是canvas相对于屏幕的坐标return{x:x-bbox.x,y:y-bbox.y}}functiondrawCanvasWithMagnifier(isShow,point){ctx.clearRect(0,0,canvas.width,canvas.height)//清空画布ctx.drawImage(img,0,0,canvas.width,canvas.height)//在画布上绘制图像/*利用离屏，绘制放大镜*/if(isShow){var{x,y}=pointvarmr=50//正方形放大镜边长//(sx,sy):待放大图像的开始坐标varsx=x-mr/2,sy=y-mr/2//(dx,dy):已放大图像的开始坐标vardx=x-mr,dy=y-mr//将offCanvas上的(sx,sy)开始的长宽均为mr的正方形区域//放大到//canvas上的(dx,dy)开始的长宽均为2*mr的正方形可视区域//由此实现放大效果ctx.drawImage(offCanvas,sx,sy,mr,mr,dx,dy,2*mr,2*mr)}/*********************/}</script></body></html>

到此，相信大家对“html中如何使用canvas实现离屏技术与放大镜效果”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！