HTML5新特性 day_03(8.9)Canvas的路径、动画，Three.js和地理位置

一、Canvas的路径

路径（Path）是将一组坐标点按照顺序连接起来所形成的图形。

Canvas绘制路径时的API：

1. 调用ctx.beginPath()开启一条新路径。

2. 调用ctx.moveTo(x, y)将画笔移动到某一个起始点。

3. 调用ctx.lineTo(x, y)向目标点(x,y)绘制直线路径。

4. 调用ctx.stroke()对路径进行描边、ctx.fill()对闭合路径进行填充。

案例：绘制一个三角形。03_path.html

案例：移动端的手绘板

在移动端平台下，通过手指触摸可以在canvas中绘制手指移动经过的路径。这就需要监听canvas元素的touch相关事件（移动端触摸所涉及到的事件）。

touch相关事件主要包含以下几类：

touchstart : 开始触摸时触发

touchmove: 当手指在元素上触摸移动时触发

touchcancel： 当触摸事件被打断时触发

touchend： 当触摸结束时触发

实现一个手写板，本质上就是：

1. 在开始触摸时，开启一条新路径并将画笔移动到此处。

2. 当触摸并移动时，需要实时捕获移动到的目标点，将现有路径连接该目标点，绘制描边即可显示路径效果。

案例：04_board.html

canvas绘制路径相关API

为了更方便的绘制路径（lineTo()太细了），canvas提供了一些好用的API方法用于绘制路径：

ctx.rect() 绘制矩形路径

 xrz.arc()绘制圆弧路径

案例：02_path.html

 

二、Canvas的动画

动画的本质：每隔一段时间（非常快：1/60秒一次）重新绘制UI界面。每次重绘时比着上一帧图像都有一点点的变化，由于眼睛视觉残留现象，出现动画效果。

如果使用Canvas来绘制动画，本质是一样的：每秒绘制60遍canvas，每次绘制canvas时都与上次绘制的内容有变化即可出现动画效果。

使用定时器实现动画：

 

 

案例：基于视频播放器页面，绘制弹幕。

1. 准备一个：input与button。

2. 准备一个：canvas，设置宽高，覆盖到Video标签之上。

3. 当点击发送弹幕按钮后，将input中的内容显示在canvas之上。

4. 实现动画效果。

   1. 在页面全局启动一个定时器，该定时器的功能就不断的遍历所有的弹幕信息，遍历过程中，对每一个弹幕的x坐标进行修改，修改完毕后重新绘制所有弹幕即可。

   2. 定时器需要拿到所有的弹幕数据，所以在点击发送弹幕按钮时，只需要将弹幕信息存储起来即可。

window.setInterval()实现动画，由于API的设计特点导致无法保证每秒绘制60帧。所以将极可能出现掉帧现象。（卡）

如果希望绘制丝滑动画，推荐使用window.requestAnimationFrame()方法绘制动画：

 

三、Three.js

优秀的绘制3D图像的框架。

git clone --depth=1 https://github.com/mrdoob/three.js.git

1. 在二维的canvas上绘制三维模型，需要通过数学运算，将三维模型转为二维模型，然后进行绘制，而这种转换需要大量矩阵运算，Three.js底层封装了webgl，可以通过显卡完成这些模型转化。

2. Three.js绘图方式，创建各种对象：

   1. 场景对象

   2. 模型对象

   3. 材质对象

   4. 光源对象

   5. 摄像机对象

   6. 渲染器等

四、地理定位

HTML5提供了API可以获取打开当前网页的浏览器所在的地理位置。而想要获取设备所在的地理位置（经纬度），不仅仅只需要API，还需要打开网页的客户端设备支持提供定位信息。

常见的定位方式：

1. IP定位

2. 运营商基站定位

3. GPS、北斗卫星定位

获取经纬度的API

 定位成功，将会返回：

高德地图提供了小工具可以使用地图查看经纬度坐标位置：

lbs.amap.com -- 开发支持 -- 地图工具 -- 坐标拾取器 -- 选择按坐标搜索 -- 填写格式：经度,纬度。

Google浏览器有可能定位失败（IP定位需要访问Google服务，超时）。Google浏览器提供了虚拟定位小工具：

F12 -- ESC -- 点击三个点 -- Sensors -- 切换以下Location -- 启动虚拟定位。

接入第三方地图服务

第三方地图服务：高德地图、百度地图、腾讯地图

接入高德地图

打开高德地图开放平台： https://lbs.amap.com

选择：开发支持 -- web端 -- 地图JSAPI