利用 canvas 除了可以实现滤镜，还可以利用 离屏技术 放大镜功能。
为了方便讲解，本文分为 2 个应用部分：
实现水印和中心缩放实现放大镜1. 什么是离屏技术？
介绍过 drawimage 接口。除了绘制图像，这个接口还可以： 将一个 canvas 对象绘制到另一个 canvas 对象上 。这就是离屏技术。
2. 实现水印和中心缩放
在代码中，有两个 canvas 标签。分别是可见与不可见。 不可见的 canvas 对象上的 context 对象，就是我们放置图像水印的地方。
更多详解，请看代码注释：
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>learn canvas</title> <style> canva师范学校排名s { display: block; margin: 0 auto; border: 1px solid #222; } input { display: block; margin: 20px auto; width: 800px } </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"> window.onload = function () { var canvas = document.querylector("#my-canvas") var watermarkcanvas = document.querylector("#watermark-canvas") var slider = document.querylector("input") var scale = slider.value var ctx = canvas.getcontext('2d') var watermarkctx = watermarkcanvas.getcontext("2d") /* 给第二个canvas获取的context对象添加水印 */ watermarkcanvas.width = 300 watermarkcanvas.height = 100 watermarkctx.font = "bold 20px arial" watermarkctx.linewidth = "1" watermarkctx.fillstyle = "rgba(255 , 255 , 255, 0.5)" watermarkctx.filltext("=== yuanxin.me ===", 50, 50) /****************************************/ var img = new image() img.src = "./img/photo.jpg" /* 加载图片后执行操作 */ img.onload = function () { canvas.width = img.width; canvas.height = img.height; drawimagebyscale(canvas, ctx, img, scale, watermarkcanvas); // 监听input标签的moumove事件 // 注意：moumove实时监听值的变化，内存消耗较大 slider.onmoumove = function () { scale = slider.value drawimagebyscale(canvas, ctx, img, scale, watermarkcanvas); } } /******************/ } /** * * @param {object} canvas 画布对象 * @param {object} ctx * @param {object} img * @param {number} scale 缩放比例 * @param {object} watermark 水印对象 */ function drawimagebyscale(canvas, ctx, img, scale, watermark) { // 图像按照比例进行缩放 var width = img.width * scale, height = img.height * scale // (dx, dy): 画布上绘制img的起始坐标 var dx = canvas.width / 2 - width / 2, dy = canvas.height / 2 - height / 2 ctx.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><html lang="en"><head> <meta chart="utf-8"> <title>document</title> <style> canvas { display: block; margin: 0 auto; border: 1px solid #222; } </style></head><body> <canvas id="my-canvas"></canvas> <canvas id="off-canvas" style="display: none;"></canvas> <script> var ismoudown = fal, scale = 1.0 var canvas = document.querylector("#my-canvas") var offcanvas = document.querylector("#off-canvas") // 离屏 canvas var ctx = canvas.getcontext("2d") var offctx =元素周期表高清大图 offcanvas.getcontext("2d") // 离屏 canvas 的 context对象 var img = new image() window.onload = function () { img.src = "./img/photo.jpg" img.onload = function () { canvas.width = img.width canvas.height = img.height offcanvas.width = img.width offcanvas.height = 我的九个姐姐风华绝代全文免费阅读img.height //悲伤纯音乐 计算缩放比例 scale = offcanvas.width / canvas.width // 初识状态下, 两个canvas均绘制image ctx.drawimage(img, 0, 0, canvas.width, canvas.height) offctx.drawimage(img, 0, 0, canvas.width, canvas.height) } // 鼠标按下 canvas.onmoudown = function (event) { event.preventdefault() // 禁用默认事件 var point = windowtocanvas(event人民的名义高小凤.clientx, event.clienty) // 获取鼠标相对于 canvas 标签的坐标 ismoudown = true drawcanvaswithmagnifier(true, point) // 绘制在离屏canvas上绘制放大后的图像 } // 鼠标移动 canvas.onmoumove = function (event) { event.preventdefault() // 禁用默认事件 if (ismoudown === true) { var point = windowtocanvas(event.clientx, event.clienty) drawcanvaswithmagnifier(true, point) } } // 鼠标松开 canvas.onmouup = function (event) { event.preventdefault() // 禁用默认事件 ismoudown = fal drawcanvaswithmagnifier(fal) // 不绘制离屏放大镜 } // 鼠标移出canvas标签 canvas.onmouout = function (event) { event.preventdefault() // 禁用默认事件 ismoudown = fal drawcanvaswithmagnifier(fal) // 不绘制离屏放大镜 } } /** * 返回鼠标相对于canvas左上角的坐标 * @param {number} x 鼠标的屏幕坐标x * @param {number} y 鼠标的屏幕坐标y */ function windowtocanvas(x, y) { var bbox = canvas.getboundingclientrect() // bbox中存储的是canvas相对于屏幕的坐标 return { x: x - bbox.x, y: y - bbox.y } } function drawcanvaswithmagnifier(isshow, 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 // 将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>放大镜效果如下图所示(被红笔标出的区域就是我们的正方形放大镜)：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持www.887551.com。
本文发布于:2023-04-06 10:08:25，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/f727e2c29e35041e4a5e0305492d945d.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：canvas离屏技术与放大镜实现代码示例.doc
本文 PDF 下载地址：canvas离屏技术与放大镜实现代码示例.pdf
| 留言与评论（共有 0 条评论） |
