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

最新推荐文章于 2024-05-11 12:50:38 发布

abssss1

最新推荐文章于 2024-05-11 12:50:38 发布

阅读量1k

点赞数 1

文章标签： html5 动画 html

原文链接：https://blog.csdn.net/Janicecat/article/details/121798472

版权

`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().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)

实现弹幕.

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

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

windw.requestAnimationFrame()

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

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

function draw(){
    // 计算  耗时代码
    xxxxxxxxx
    window.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: Coordinates
    accuracy: 19218             定位准确度       
    altitude: 0                 海拔高度    
    altitudeAccuracy: null      海拔准确度
    heading: NaN            
    latitude: 39.9078           纬度
    longitude: 116.3975         经度
    speed: NaN                  运动速度
timestamp: 1636426246419        毫秒时间戳

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