20.全局方法：
context.globalAlpha = 1 (Default) //全局透明度，默认不透明context.globalCompositeOperation = "source-over" (Default) //绘制的图像在重叠的时候的效果，默认是(source-over)后面绘制的图像覆盖前面绘制的图像"source-atop" //后面绘制的图像覆盖前面绘制的图像，但后面的图像只显示重叠部分"source-in" //后面绘制的图像覆盖前面绘制的图像，但只显示重叠部分"source-out" //只显示后绘制的图像，而且重叠部分被切掉"destination-over" //前面绘制的图像覆盖后面绘制的图像"destination-atop" //前面绘制的图像覆盖后面绘制的图像，但前绘制的图像只显示重叠部分"destination-in" //前面绘制的图像覆盖后面绘制的图像，但只显示重叠部分"destination-out" //只显示前绘制的图像，而且重叠部分被切掉"lighter" //重叠部分颜色叠加融合"copy" //只显示后绘制图像"xor" //异或，重叠部分被挖空21.剪辑区域
将当前创建的路径设置为当前剪切路径的方法
fillRule
这个算法判断一个点是在路径内还是在路径外。
path
需要剪切的 Path2D 路径。
例：
ctx.arc(100, 100, 75, 0, Math.PI*2, false); ctx.clip(); ctx.fillRect(0, 0, 100,100);22.非零环绕原则
路径方向
应用：镂空剪纸效果
23.canvas交互
24.扩展Canvas的context
将drawStar方法扩展到context：
25.Canvas兼容性
检测
Canvas与IE6、7、8浏览器的兼容性问题
引入explorecanvas库：
2、使浏览器可访问到Kinect数据
我尝试和了解过的框架，基本上是以socket让浏览器进程与服务器进行通信 ，进行数据传输：
我最终选用Node-Kinect2，虽然没有文档，但是实例较多，使用前端工程师熟悉的Nodejs，另外作者反馈比较快。
先得买个Kinect啊
1、系统要求：
这是硬性要求，我曾在不符合要求的环境下浪费太多时间。
2、环境搭建流程：
npm install kinect2四、实例演示说什么都不如给我一个例子！
如下图所示，我们演示如何获取人体骨骼，并标识脊椎中段及手势：
1、服务器端
创建web服务器，并将骨骼数据发送到浏览器端，代码如下：
var Kinect2 = require('../../lib/kinect2'), express = require('express'), app = express(), server = require('http').createServer(app), io = require('socket.io').listen(server); var kinect = new Kinect2(); // 打开kinect if(kinect.open()) { // 监听8000端口 server.listen(8000); // 指定请求指向根目录 app.get('/', function(req, res) { res.sendFile(dirname + '/public/index.html'); }); // 将骨骼数据发送给浏览器端 kinect.on('bodyFrame', function(bodyFrame){ io.sockets.emit('bodyFrame', bodyFrame); }); // 开始读取骨骼数据 kinect.openBodyReader(); }2、浏览器端
浏览器端获取骨骼数据，并用canvas描绘出来，关键代码如下：
var socket = io.connect('/'); var ctx = canvas.getContext('2d'); socket.on('bodyFrame', function(bodyFrame){ ctx.clearRect(0, 0, canvas.width, canvas.height); var index = 0; // 遍历所有骨骼数据 bodyFrame.bodies.forEach(function(body){ if(body.tracked) { for(var jointType in body.joints) { var joint = body.joints[jointType]; ctx.fillStyle = colors[index]; // 如果骨骼节点为脊椎中点 if(jointType == 1) { ctx.fillStyle = colors[2]; } ctx.fillRect(joint.depthX * 512, joint.depthY * 424, 10, 10); } // 识别左右手手势 updateHandState(body.leftHandState, body.joints[7]); updateHandState(body.rightHandState, body.joints[11]); index++; } }); });很简单的几行代码，我们便完成了玩家骨骼捕获，有一定 javascript基础的同学应该很容易能看明白，但不明白的是我们能获取哪些数据？如何获取？骨骼节点名称分别是什么？而node-kienct2并没有文档告诉我们这些。
五、开发文档Node-Kinect2并没有提供文档，我将我测试总结的文档整理如下：
1、服务器端能提供的数据类型；
kinect.on('bodyFrame', function(bodyFrame){}); //还有哪些数据类型呢？bodyFrame骨骼数据
infraredFrame红外数据
longExposureInfraredFrame类似infraredFrame，貌似精度更高，优化后的数据
rawDepthFrame未经处理的景深数据
depthFrame景深数据
colorFrame彩色图像
multiSourceFrame所有数据
audio音频数据，未测试
2、骨骼节点类型
body.joints[11] // joints包括哪些呢？节点类型JointType节点名称
0spineBase脊椎基部
1spineMid脊椎中部
2neck颈部
3head头部
4shoulderLeft左肩
5elbowLeft左肘
6wristLeft左腕
7handLeft左手掌
8shoulderRight右肩
9elbowRight右肘
10wristRight右腕
11handRight右手掌
12hipLeft左屁
13kneeLeft左膝
14ankleLeft左踝
15footLeft左脚
16hipRight右屁
17kneeRight右膝
18ankleRight右踝
19footRight右脚
20spineShoulder颈下脊椎
21handTipLeft左手指（食中无小）
22thumbLeft左拇指
23handTipRight右手指
24thumbRight右拇指
3、手势，据测识别并不是太准确，在精度要求不高的情况下使用
0unknown不能识别
1notTracked未能检测到
2open手掌
3closed握拳
4lasso剪刀手，并合并中食指
4、骨骼数据
body [object] {
bodyIndex [number]：索引，允许6人
joints [array]：骨骼节点，包含坐标信息，颜色信息
leftHandState [number]：左手手势
rightHandState [number]：右手手势
tracked [boolean]：是否捕获到
trackingId
}
5、kinect对象
on监听数据
open打开Kinect
close关闭
openBodyReader读取骨骼数据
open**Reader类似如上方法，读取其它类型数据
六、实战总结火影体感游戏经验总结
接下来，我总结一下TGC2016《火影忍者手游》的体感游戏开发中碰到的一些问题。
1、讲解之前，我们首先需要了解下游戏流程。
1.1、通过手势触发开始游戏
1.2、玩家化身四代，左右跑动躲避九尾攻击
1.3、摆出手势“奥义”，触发四代大招
1.4、用户扫描二维码获取自己现场照片
2、服务器端
相关文章
精彩导读
热门资讯
关注我们
