Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
uni-app
提交
19a0da24
U
uni-app
项目概览
DCloud
/
uni-app
2 个月 前同步成功
通知
717
Star
38705
Fork
3642
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
7
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
7
Issue
7
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
19a0da24
编写于
6月 28, 2020
作者:
W
wanganxp
提交者:
GitHub
6月 28, 2020
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Update canvas.md
上级
fba12c34
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
5 addition
and
3 deletion
+5
-3
docs/component/canvas.md
docs/component/canvas.md
+5
-3
未找到文件。
docs/component/canvas.md
浏览文件 @
19a0da24
...
...
@@ -21,11 +21,11 @@
*
canvas 标签默认宽度 300px、高度 225px,动态修改 canvas 大小后需要重新绘制。
*
同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的画布将被隐藏并不再正常工作。
*
canvas 在微信小程序、百度小程序、QQ小程序中为原生组件,层级高于前端组件,请勿内嵌在 scroll-view、swiper、picker-view、movable-view 中使用。解决 canvas 层级过高无法覆盖,参考
[
native-component
](
/component/native-component
)
。其他小程序端的 canvas 仍然为 webview 中的 canvas。
*
app-vue 中的 canvas 仍然是 webview 的 canvas。app-nvue下如需使用canvas,需下载插件,
暂未封装为uni API,可参考
[
文档
](
https://github.com/dcloudio/NvueCanvasDemo
)
使用。目前对nvue的开发者仍然建议在使用canvas时单独起一个vue页面,或者用web-view组件
。
*
app-vue 中的 canvas 仍然是 webview 的 canvas。app-nvue下如需使用canvas,需下载插件,
详见文档底部章节
。
*
app-vue的canvas虽然是webview自带的canvas,但却比nvue和微信小程序的原生canvas性能更高。注意并非原生=更快。canvas动画的流畅,关键不在于渲染引擎的速度,而在于减少从逻辑层向视图层频繁通信造成的折损。
*
小程序、app-nvue,因为通信阻塞,难以绘制非常流畅的canvas动画。h5和app-vue不存在此问题。但注意,app-vue下若想流畅的绘制canvas动画,需要使用
[
renderjs
](
https://uniapp.dcloud.io/frame?id=renderjs
)
技术,把操作canvas的js逻辑放到视图层运行,避免逻辑层和视图层频繁通信。hello uni-app的canvas示例很典型,在相同手机运行该示例,可以看出在h5端和app端非常流畅,而小程序端做不到这么流畅的动画。
*
小程序、app-nvue,因为通信阻塞,难以绘制非常流畅的canvas动画。h5和app-vue不存在此问题。但注意,app-vue下若想流畅的绘制canvas动画,需要使用
[
renderjs
](
https://uniapp.dcloud.io/frame?id=renderjs
)
技术,把操作canvas的js逻辑放到视图层运行,避免逻辑层和视图层频繁通信。hello uni-app的canvas示例很典型,在相同手机运行该示例,可以看出在h5端和app端非常流畅,而小程序端
由于没有renderjs技术,
做不到这么流畅的动画。
**示例:**
**示例:**
[
查看演示
](
https://hellouniapp.dcloud.net.cn/pages/component/canvas/canvas
)
```
html
<template>
...
...
@@ -84,3 +84,5 @@ canvas的常用用途有图表和图片处理,在uni-app插件市场有大量
HBuilderX 2.2.5(alpha)开始 nvue 页面支持 Canvas,支持 W3C WebGL API
[
WebGL 1.0
](
https://www.khronos.org/registry/webgl/specs/latest/1.0/
)
示例工程地址:
[
NvueCanvasDemo
](
https://github.com/dcloudio/NvueCanvasDemo
)
在App端,从性能来讲,由于通讯阻塞的问题,nvue的canvas性能不可能达到使用renderjs的vue页面的canvas。在App端,推荐使用vue的canvas。
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录