Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
hello uni-app x
提交
937b99f0
H
hello uni-app x
项目概览
DCloud
/
hello uni-app x
通知
6018
Star
91
Fork
164
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
18
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
H
hello uni-app x
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
18
Issue
18
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
937b99f0
编写于
11月 02, 2024
作者:
H
hdx
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(ball): 调整调用方式为 createCanvasContextAsync
上级
3fd8c09d
变更
1
显示空白变更内容
内联
并排
Showing
1 changed file
with
25 addition
and
20 deletion
+25
-20
pages/component/canvas/canvas/ball.uvue
pages/component/canvas/canvas/ball.uvue
+25
-20
未找到文件。
pages/component/canvas/canvas/ball.uvue
浏览文件 @
937b99f0
...
...
@@ -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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录