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
的虚拟定位.
接入第三方位置服务平台 - 百度地图/高德地图
高德地图 JS API 是一套 JavaScript 语言开发的的地图应用编程接口,移动端、PC端一体化设计,一套 API 兼容众多系统平台。目前 JS API 免费开放使用。
JS API 提供了2D、3D地图模式,满足绝大多数开发者对地图展示、地图自定义、图层加载、点标记添加、矢量图形绘制的需求,同时也提供了 POI 搜索、路线规划、地理编码、行政区查询、定位等众多开放服务接口。
JS API 拥有完善的文档体,系统学习地图和服务接口调用请前往教程,快速了解 JS API 的全部核心能力请前往示例中心。查阅详细接口说明文档请前往参考手册,使用遇到问题可查看常见问题或者提交工单。