教程所示图片运用的是 github 堆栈图片，网速过慢的朋侪请移步>>> （原文）canvas 离屏手艺与放大镜完成。
更多议论或许毛病提交，也请移步。
运用
canvas除了能够完成滤镜，还能够运用
离屏手艺放大镜功用。
为了轻易解说，本文分为 2 个运用部份：
- 完成水印和中间缩放
- 完成放大镜
1. 什么是离屏手艺？
canvas 进修和滤镜完成引见过drawImage接口。除了绘制图象，这个接口还能够：将一个canvas对象绘制到另一个canvas对象上。这就是离屏手艺。
2. 完成水印和中间缩放
在代码中，有两个 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 = 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标签的mousemove事宜
// 注重：mousemove及时监听值的变化，内存斲丧较大
slider.onmousemove = 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 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)
drawCanvasWithMagnifier(true, 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>放大镜结果以下图所示(被红笔标出的地区就是我们的正方形放大镜)：
迎接入群：_857989948_ 。IT 手艺深度交换和分享，触及方面包含但不限于：网站制造、运营、UI 设想、算法剖析、大数据、人工智能等。本群主打有深度、有立场的手艺交换，迎接热中纪录学问的您的到场。
