提交 937b99f0 编写于 作者: H hdx

feat(ball): 调整调用方式为 createCanvasContextAsync

上级 3fd8c09d
......@@ -71,6 +71,7 @@
class BallAnimation {
private ctx : CanvasRenderingContext2D
private canvasContext : CanvasContext
private ballList : Array<Ball> = []
private _speed = 3
private _layer = 3
......@@ -81,8 +82,9 @@
private frameCount = 0
private lastTime = 0
constructor(ctx : CanvasRenderingContext2D) {
this.ctx = ctx
constructor(canvasContext : CanvasContext) {
this.canvasContext = canvasContext
this.ctx = canvasContext.getContext('2d') as CanvasRenderingContext2D
this.initBall()
this.ctx.fillStyle = '#007AFF'
}
......@@ -151,7 +153,7 @@
if (!this.runningFlag) {
return
}
this._animateTaskId = requestAnimationFrame((timestamp : number) => {
this._animateTaskId = this.canvasContext.requestAnimationFrame((timestamp : number) => {
this.animate()
this.updateFPS(timestamp)
})
......@@ -168,33 +170,36 @@
}
start() {
cancelAnimationFrame(this._animateTaskId)
this.canvasContext.cancelAnimationFrame(this._animateTaskId)
this.runningFlag = true
this.animate()
}
stop() {
this.runningFlag = false
cancelAnimationFrame(this._animateTaskId)
this.canvasContext.cancelAnimationFrame(this._animateTaskId)
}
}
let animation : BallAnimation | null = null
onReady(() => {
let canvas = uni.getElementById("canvas") as UniCanvasElement
let canvasContext = canvas.getContext("2d");
if (canvasContext != null) {
uni.createCanvasContextAsync({
id: 'canvas',
// component: this,
success: (context : CanvasContext) => {
const renderingContext = context.getContext('2d')!;
const canvas = renderingContext!.canvas;
const dpr = uni.getDeviceInfo().devicePixelRatio ?? 1;
canvas.width = canvas.offsetWidth * dpr
canvas.height = canvas.offsetHeight * dpr
canvasContext.scale(dpr, dpr)
renderingContext.scale(dpr, dpr)
animation = new BallAnimation(canvasContext)
animation = new BallAnimation(context)
animation?.start()
} else {
console.log("canvas.getContext error!!")
}
})
})
let lessClick = (type : string) => {
if (type == 'speed') {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册