利用canvas除了可以實現濾鏡，還可以利用離螢幕技術放大鏡功能。
為了方便講解，本文分為2 個應用部分：
canvas 學習和濾鏡實作介紹過drawImage介面。除了繪製影像，這個介面還可以：將一個canvas物件繪製到另一個canvas物件上。這就是離螢幕技術。
在程式碼中，有兩個canvas 標籤。分別是可見與不可見。 不可見的canvas 物件上的Context 對象，就是我們放置影像浮水印的地方。
更多詳解，請看程式碼註解：
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Learn Canvas</title> <style> canvas { 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.querySelector(#my-canvas) var watermarkCanvas = document.querySelector(#watermark-canvas) var slider = document.querySelector(input) var scale = slider.value var ctx = canvasdsConctx = canvas2.Conctx = can2.Conctx = can2.Conctx = can2.Conctx = can2.Conctx = can2.Conctx） var watermarkCtx = watermarkCanvas.getContext(2d) /* 為第二個canvas取得的Context物件加入浮水印*/ watermarkCanvas.width = 300 watermarkCanvas.height = 100 watermarkCtx.font = bold 20px Arial watermarkCtx.lineWidt = 1575 月, 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標籤的mousemove事件// 注意：mousemove即時監聽值的變化，記憶體消耗較大slider.onmousemove = function (emove = function (emove = 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 個部分：
程式碼如下：
<!DOCTYPE html><html lang=en><head> <meta charset=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 isMouseDown = false, scale = 1.0 var canvas = document.querySelector(#my-canvas) var offCanvas = document.querySelector(#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.onmousedown = function (event) { event.preventDefault() // 停用預設事件var point = windowToCanvas(event.clientX, event.clientY) // 取得滑鼠相對於canvas 標籤的座標isMouseDown = true drawCanvasWithMagnifier(true, point) // 繪製在離屏canvas上繪製放大後的圖像} //滑鼠移動canvas.onmousemove = function (event) { event.preventDefault() // 停用預設事件if (isMouseDown === true) { var point = windowToCanvas(event.clientX, event.clientY) drawvasCanWithMagnifier(truevas(event.clientX, event.clientY) drawvasCanWithMagnifier(truevas, point) } } // 滑鼠放開canvas.onmouseup = function (event) { event.preventDefault() // 停用預設事件isMouseDown = false drawCanvasWithMagnifier(false) // 不繪製離螢幕放大鏡} // 滑鼠移出canvas標籤canvas.onmouseout = function (event) { event.preventDefault() // 停用預設事件isMouseDown = false drawCanvasWithMagnifier(false) // 不繪製離屏放大鏡} } /** * 傳回滑鼠相對於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>放大鏡效果如下圖所示(被紅筆標示的區域就是我們的方形放大鏡)：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。