HTML5中的canvas动画以及地理定位

`Canvas`

什么是canvas?

canvas(画布) 是可以使用Javascript来绘制图形的html元素. 基本的语法结构:

<canvas id="" width="宽度像素个数" height="高度像素个数"></canvas>

案例.

canvas的应用场景

网页特效.
网页游戏.
数据可视化图表.

`canvas`基础图形图像的绘制

canvas的基本使用步骤:

let cvs = document.getElementById('canvas')
// 获取用于绘制图形的 Context 对象
let ctx = cvs.getContext('2d')
ctx.xxxxxxxx()

contextType 上下文类型

'2d' 将会返回CanvasRenderingContext2D对象,用于渲染二维图形

'webgl' 将会返回WebGLRenderingContext对象,用于渲染三维图形

CanvasRenderingContext2D

绘制填充

ctx.fillStyle = 'red'  // 设置填充样式  颜色
ctx.fillRect(x, y, width, height)   // 填充一个矩形

绘制描边

ctx.strokeStyle = 'red'   // 设置描边样式   颜色
ctx.strokeRect(x, y, width, height)   // 对一个矩形描边

绘制文本

ctx.font = '25px  微软雅黑'
// 填充文本
ctx.fillText(text, x, y)    // (文本内容, 坐标x, 坐标y)
//描边文本
ctx.strokeText(text, x, y)

`canvas`路径绘制

路径(path)是将预先设定好的坐标点,按照顺序连接起来所形成的图形.

路径绘制的基本步骤:

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

调用ctx.moveTo(x, y)将画笔移动到指定位置.

调用相关方法开始绘制路径(例如: ctx.lineTo(x, y))

最后通过stroke() 或 fill()方法进行描边或填充.

案例:绘制一个三角形.

案例:离线画板.

触摸相关事件总结

touchstart 开始触摸时触发

touchmove 触摸移动时触发

touchcancel 触摸被打断取消时触发

touchend 触摸结束时触发

<script>let cvs = document.getElementById('canvas')let ctx = cvs.getContext('2d')// 开始触摸时执行   cvs.addEventListener("touchstart", (e)=>{console.log(e)// 获取当前坐标位置, 开启一个新路径// dom节点.getBoundingClientRect() 方法的返回值, 封装了// 当前dom节点相对于客户端的坐标位置let left = cvs.getBoundingClientRect().leftlet top = cvs.getBoundingClientRect().toplet x = e.touches[0].pageX - leftlet y = e.touches[0].pageY - topctx.beginPath()ctx.moveTo(x, y)})// 触摸移动时触发cvs.addEventListener("touchmove", (e)=>{let left = cvs.getBoundingClientRect().leftlet top = cvs.getBoundingClientRect().toplet x = e.touches[0].pageX - leftlet y = e.touches[0].pageY - topctx.lineTo(x, y)ctx.strokeStyle = 'red'ctx.stroke()})

</script>

canvas提供的绘制路径的常用API

ctx.rect() 用于绘制矩形路径

// 左上角x, 左上角y, 宽, 高
ctx.rect(x, y, width, height)

ctx.arc() 用于绘制圆弧路径

// (x,y) 圆形坐标, 半径, 起始弧度值, 结束弧度值
ctx.arc(x, y, radius, startangle, endangle)

`canvas`动画

动画的实现原理即每隔一段时间(非常快 1/60秒) 重绘canvas. 每次绘制时, 内容都会有些许变化, 由于视觉残留现象, 出现动画效果.

window.setInterval(()=>{计算并且设置最新的元素样式/位置/属性等重绘UI
}, 1000/60)

实现弹幕.

新增输入框与按钮. 为按钮绑定事件. 点击按钮后, 将文本框找中的内容封装成dm对象 {text:'xxx', x:1, y:4} . 将dm对象添加到dmlist中.
全局启动一个定时器, 每1000/60执行一次, 每次重新计算dmlist中每个弹幕对象的x属性, 然后绘制每个dm对象.

动画卡顿的核心原因: 掉帧

windw.requestAnimationFrame()

requestAnimationFrame(callback)方法用于请求浏览器绘制动画帧时, 执行callback.

基于requestAnimationFrame()实现动画的代码基本结构如下:

function draw(){// 计算  耗时代码xxxxxxxxxwindow.requestAnimationFrame(draw)
}
window.requestAnimationFrame(draw)

requestAnimationFrame动画的间隔时间由显示器的刷新率控制. 若刷新率低, 则每秒执行的次数就少, 若刷新率高, 则每秒执行的次数就多.

地理定位

定位的基础与原理

IP定位

运营商基站定位

GPS定位

地理定位的实现

地理定位API允许用户向web应用程序提供他们的位置(经纬度).但是这个操作需要用户授权.

获取地理定位的相关代码如下:

let geoloc = window.navigator.geolocation
let success = function(msg){}
let error = function(msg){}
geoloc.getCurrentPosition(success,  // 获取定位成功后执行的回调函数  error,    // 获取定位失败后执行的回调函数  option    // {}对象类型, 指定定位配置参数
);

案例: 获取浏览器所在当前位置(经纬度).

一旦定位成功, 将会输出如下位置信息:

coords: Coordinatesaccuracy: 19218             定位准确度       altitude: 0                 海拔高度    altitudeAccuracy: null      海拔准确度heading: NaN            latitude: 39.9078           纬度longitude: 116.3975         经度speed: NaN                  运动速度
timestamp: 1636426246419        毫秒时间戳

chrome浏览器只能适用于https协议的网站. 所以建议打开chrome的虚拟定位.

接入第三方位置服务平台 - 百度地图/高德地图

高德地图 JS API 是一套 JavaScript 语言开发的的地图应用编程接口，移动端、PC端一体化设计，一套 API 兼容众多系统平台。目前 JS API 免费开放使用。

JS API 提供了2D、3D地图模式，满足绝大多数开发者对地图展示、地图自定义、图层加载、点标记添加、矢量图形绘制的需求，同时也提供了 POI 搜索、路线规划、地理编码、行政区查询、定位等众多开放服务接口。

JS API 拥有完善的文档体，系统学习地图和服务接口调用请前往教程，快速了解 JS API 的全部核心能力请前往示例中心。查阅详细接口说明文档请前往参考手册，使用遇到问题可查看常见问题或者提交工单。