←首页

说实话,我对 Canvas 真的不熟,没有在任何生产环境用过,除了偶尔自己写(抄)一些 Demo 。

但是通常面试的时候会问到,你要是回问,Canvas 是什么东西,场面就相当尴尬。所以建议你平时没事也可以练练手,至少掌握一些常用 API。今天想分享的是,使用 Canvas Ghost 来做两个神奇的 Demo 。

Canvas Ghost 是什么? Google 一下,貌似没有什么人这么称呼,但是隐约在哪里看过。不过这都不重要,我的意思是,通过镜像或者说肉眼看不见的复本来借用 Canvas 的 API,以达到真正目的。那么就管这个虚无缥缈的 Canvas 叫做 Canvas Ghost。 这么说不过分吧。

Demo1 - 不规则图形范围检测

假设有天,设计师给了你一张 png 图片,大部分内容是透明的。需求是,当用户鼠标滑到内容区域(非透明像素点)上的时候,要标记图片高亮。

没明白什么意思的话,看图吧。
效果图
当鼠标移入 png 图片非透明区域的时候,需要把图片的背景色置灰,你懂我意思吧?
那么就这个简单的需求,你会有什么解决方案? 获取图片上某个位置是否透明?JavaScript 没有这样的 Api 吧!但是 Canvas 有。Canvas 有个 getImageData 的接口,通过这个接口可以获取到 Canvas 上每一个像素点的像素值。这么一转换的话,问题是不是就很简单了?

看代码!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 创建一个虚拟的 Canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 对目标元素绑定事件
self.$ele.on('mouseenter', $.proxy(this._copyImageToCtx, this));
self.$ele.on('mousemove', $.proxy(this._onMouseMove, this));
self.$ele.on('mouseleave', $.proxy(this._removeImageFromCtx, this));
// onMouseMove 转换坐标,获取 Canvas Ghost 上相对于位置的色值
var mousePos = {
x: event.pageX,
y: event.pageY
}
var pixelPos = convertCoord(mousePos, self.offset);
var pixelColor = ctx.getImageData(pixelPos.x, pixelPos.y, 1, 1).data;
// pixelColor 是个数组,有四个值,分别对应 r,g,b,a
//
if (pixelColor[3] !== 0) {
self.$ele.addClass(self.settings.hoveringClass);
} else {
self.$ele.removeClass(self.settings.hoveringClass);
}

完整代码看github,大部分代码参考自shaperollover
代码量非常少,但是按这个套路还可以演化出很多不可思议的效果,留给聪明的读者你自己去思考。

Demo2 - 代理事件

我们知道 Canvas 就是一块画布,大部分操作就像画笔一样,在上边描绘内容。画上去的内容不像 Dom 结构,无法对某个图像绑定事件。这个 Demo 演示的是,通过 Canvas Ghost 代理来实现获取 event target 的效果。

核心代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
for (var i = boxsLength - 1; i >= 0; i--) {
var box = boxList[i];
// 清除 ghost 画板
ghostCtx.clearRect(0, 0, canvasWidth, canvasHeight);
// 创建相同形状相同位置,黑色 box
var fakeBox = new Box(box.x, box.y, box.width, box.height, 'black');
fakeBox.drawOn(ghostCtx);
// 使用 getImageData 获取对应点样式
var pixelData = ghostCtx.getImageData(ox, oy, 1, 1).data;
if (pixelData[3] !== 0) {
// 记录选中元素
box.isActive = true;
draggingIndex = i;
break;
}
}

注意是在 Canvas 上的喔
完整演示代码看github

说点什么

可能你跟我一样在实际工作中不会遇上这样的需求。但是有天突然需要这样的展示效果了,束手无策怎么办?认真想想!我们真的没做过吗?Canvas Ghost 说白了不就是加了层代理嘛? 代理模式我们都懂的!平时养成多思多想的习惯,而不只是为了应付面试的刷概念,那么应对这样的需求挥手即来的代码,不过是触类旁通的必然产物。与君共勉!

如需转载,请注明出处: http://w3ctrain.com/2016/12/19/ghost-canvas-magic/ ,欢迎加入前端Q群(467969149)

标签:canvas
blog comments powered by Disqus