canvas 放大,离屏canvas的作用是什么
利用帆布除了可以实现滤镜，还可以利用离屏技术放大镜功能。
为了方便讲解，本文分为2个应用部分：
实现水印和中心缩放实现放大镜1. 什么是离屏技术？
帆布学习和滤镜实现介绍过绘图图像接口。除了绘制图像，这个接口还可以：将一个 canvas 对象绘制到另一个 canvas 对象上 。这就是离屏技术。
2. 实现水印和中心缩放
在代码中，有两个帆布标签。分别是可见与不可见。不可见的帆布对象上的语境对象，就是我们放置图像水印的地方。
更多详解，请看代码注释：
！DOCTYPE html html lang= en head meta charset= UTF 8 标题学习画布/标题样式画布{ display:block；边距：0自动；边框：1px纯色# 222;}输入{显示：块；边距：20px自动；width:800 px }/style/head body div id= app canvas id= my-canvas /canvas input type= range value= 1.0 min= 0.5 max= 3.0 step= 0.1 canvas id= watermark-canvas style= display:none；/canvas/div script type= text/JavaScript 窗口。onload=function(){ var canvas=document。查询选择器( # my-canvas )var watermark canvas=document。查询选择器(“# watermark-canvas”)var slider=document。查询选择器(“输入”)var scale=slider。价值var CTX=画布。获取上下文(“2d”)变量水印CTX=水印画布。获取上下文( 2d )/*给第二个帆布获取的语境对象添加水印*/水印画布。宽度=300水印画布。高度=100水印CTX。CTX水印。线宽= 1 水印CTX。填充样式= rgba(255，255，255，0.5)水印CTX。填充文本(====元新。me==，50，50)/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */var img=new Image()img。Sr/img/photo.jpg /*加载图片后执行操作*/img.onload=函数(){画布。宽度=img。宽度；画布。身高=img。身高；drawImageByScale(画布、ctx、img、Scale、水印画布)；//监听投入标签的鼠标移动事件//注意：鼠标移动实时监听值的变化，内存消耗较大滑块。onmousemove=function(){ scale=slider。value drawImageByScale(画布、ctx、img、Scale、水印画布)；} }/* * * * * * * * * * * * * * * * * * */}/* * * * @ param { Object }画布画布对象* @ param { Object } CTX * @ param { Object } img * @ param { Number }比例缩放比例* @param {Object}水印水印对象*/function drawImageByScale(canvas，ctx，img，Scale，watermark) { //图像按照比例进行缩放var width=img.width * scale，height=img.height * scale //(dx，dy):画布上绘制图片的起始坐标var dx=canvas.width/2 - width/2，dy=canvas。高度/2-高度/2 CTX。clear rect(0，0，canvas.width，canvas.height) //No1清空画布ctx.drawImage(img，dx，dy，宽度，高度)//No2重新绘制图像如果(水印){ //No3判断是否有水印：有，绘制水印ctx.drawImage(watermark，canvas.width - watermark.width，canvas。高度-水印。height)} }/script/body/html实现效果如下图所示：
拖动滑竿，即可放大和缩小图像。然后右键保存图像。保存后的图像，就有已经有了水印，如下图所示：
3. 实现放大镜
在上述中心缩放的基础上，实现放大镜主需要注意以下2个部分：
细化处理帆布的鼠标响应事件：滑入、滑出、点击和松开重新计算离屏坐标（详细公式计算思路请见代码注释)重新计算鼠标相对于帆布标签的坐标（详细公式计算思路请见代码注释)代码如下：
！DOCTYPE html html lang= en head meta charset= UTF 8 标题文档/标题样式画布{ display:block；边距：0自动；边框：1px纯色# 222;}/style/head body canvas id= my-canvas /canvas画布id= off-canvas style= display:none；/canvas脚本var为mousedown=false，scale=1.0 var canvas=document。查询选择器( # my-canvas )var off canvas=document。查询选择器( #离画布)//离屏画布var CTX=画布。从CTX=画布上获取上下文( 2d )变量。获取上下文( 2d )//离屏帆布的语境对象var img=新图像()窗口。onload=function(){ img。src= ./img/photo。jpg img。onload=function(){ canvas。宽度=img。画布宽度。身高=img。离开画布的高度。宽度=img。画布外的宽度。身高=img。高度//计算缩放比例scale=离开画布。宽度/画布。宽度//初识状态下，两个帆布均绘制Image ctx.drawImage(img，0，0，canvas.width，canvas。高度)offctx。绘制图像(img，0，0，canvas.width，canvas.height) } //鼠标按下画布。onmousedown=function(event){ event。防止默认值()//禁用默认事件var point=windowToCanvas(事件。clientx，event.clientY) //获取鼠标相对于帆布标签的坐标isMouseDown=true drawcanvaswithghannifier(true，点)//绘制在离屏帆布上绘制放大后的图像} //鼠标移动画布。onmousemove=function(event){ event。防止默认值()//禁用默认事件if(isMouseDown===true){ var point=windowToCanvas(event。clientx，事件。clienty)drawcanvaswithghanger(true，point) } } //鼠标松开画布。onmouseup=函数(事件){事件。防止默认值()//禁用默认事件isMouseDown=false drawcanvaswithghanger(false)//不绘制离屏放大镜} //鼠标移出帆布标签画布。onmouseout=function(event){ event。防止默认值()//禁用默认事件isMouseDown=false drawcanvaswithparifier(false)//不绘制离屏放大镜} } /** * 返回鼠标相对于帆布左上角的坐标* @param {Number} x鼠标的屏幕坐标x * @param {Number} y鼠标的屏幕坐标y */function windowToCanvas(x，y){ var bbox=canvas。getboundingclientrect()//bbox中存储的是帆布相对于屏幕的坐标返回{ x: x - bbox.x，y:y-bbox。y } }函数drawcanvaswithghanger(is show，point) { ctx.clearRect(0，0，canvas.width，canvas.height) //清空画布ctx.drawImage(img，0，0，canvas.width，canvas.height) //在画布上绘制图像/* 利用离屏，绘制放大镜*/if (isShow) { var { x，y }=point var mr=50 //正方形放大镜边长//(sx，sy):待放大图像的开始坐标var sx=x - mr/2，sy=y - mr/2 //(dx，dy):已放大图像的开始坐标var dx=x - mr，dy=y - mr //将画布外上的(sx，sy)开始的长宽均为先生的正方形区域//放大到//画布上的(dx，dy)开始的长宽均为2 *先生的正方形可视区域//由此实现放大效果ctx.drawImage(offCanvas，sx，sy，mr，mr，dx，dy，2 * mr，2 * Mr)}/* * * * * * * * * * * * * * * * */}/script/body/html放大镜效果如下图所示（被红笔标出的区域就是我们的正方形放大镜):
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。