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

Canvas

什么是canvas?

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

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

案例.

canvas的应用场景

  1. 网页特效.

  2. 网页游戏.

  3. 数据可视化图表.

canvas基础图形图像的绘制

canvas的基本使用步骤:

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

contextType 上下文类型

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

  2. '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)是将预先设定好的坐标点,按照顺序连接起来所形成的图形.

路径绘制的基本步骤:

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

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

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

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

案例:绘制一个三角形.

案例:离线画板.

触摸相关事件总结

  1. touchstart 开始触摸时触发

  2. touchmove 触摸移动时触发

  3. touchcancel 触摸被打断取消时触发

  4. 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().left
        let top = cvs.getBoundingClientRect().top
        let x = e.touches[0].pageX - left
        let y = e.touches[0].pageY - top
        ctx.beginPath()
        ctx.moveTo(x, y)
    })
    // 触摸移动时触发
    cvs.addEventListener("touchmove", (e)=>{
        let left = cvs.getBoundingClientRect().left
        let top = cvs.getBoundingClientRect().top
        let x = e.touches[0].pageX - left
        let y = e.touches[0].pageY - top
        ctx.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)

实现弹幕.

  1. 新增输入框与按钮. 为按钮绑定事件. 点击按钮后, 将文本框找中的内容封装成dm对象 {text:'xxx', x:1, y:4} . 将dm对象添加到dmlist中.

  2. 全局启动一个定时器, 每1000/60执行一次, 每次重新计算dmlist中每个弹幕对象的x属性, 然后绘制每个dm对象.

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

windw.requestAnimationFrame()

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

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

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

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

地理定位

定位的基础与原理

  1. IP定位

  2. 运营商基站定位

  3. GPS定位

地理定位的实现

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

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

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

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

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

coords: Coordinates
    accuracy: 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 的全部核心能力请前往示例中心。查阅详细接口说明文档请前往参考手册,使用遇到问题可查看常见问题或者提交工单

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值