animate的html canvas的简单学习

标签：script   标记   存在   如何使用   nbsp   asp   移动   ext   视频   

性能问题

使用fla导出canvas动画的时候也会碰到性能问题，遇到性能问题，一

般都是在Animate cc做动画的时候可以规避掉的，

减少矢量，减少影片剪辑（movie clip），减少嵌套，减少滤镜特效

1、嵌套规范

在使用animate cc设计动画效果时，尽量不要太多的嵌套，比如：影片剪辑

里面再嵌套影片剪辑或者是帧里面再嵌套其它帧

2、滤镜和动画规范

不要使用滤镜特效比如（阴影滤镜和发光滤镜）来做动画，因为这样会非

常耗费性能，在移动端上性能不可控，可以使用逐帧图片来代替相关滤镜特

效来实现动画

3、素材规范

少使用矢量多用位图，Text shape都算矢量（用animate cc制作时，在里面

就直接把字和矢量图转成位图）

Animate+webtrom与数据库交互的几个参考方法

①animate做复杂动画场景和一些简单的交互，导出html文件，然后结合

webtrom，canvas元素与其他HTML控件结合起来使用，以便让用户可以通

过输入数值或其他方式来控制程序，使用非canvas技术实现，调用数据，和

数据库交互，

②canvas和数据库交互，把数据存进数据库，更新图形数据，例如：canvas图表ECharts

③animate做出来的动画，导出视频、gif、图像，存在数据库里，与数据库交互

更多canvas学习

Canvas API：提供了一个通过JavaScript 和 HTML的元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API

拓展学习《Core HTML5 Canvas：Graphics, Animation, and Game Development》

https://www.jianshu.com/p/3de074f739a8

HTML5 Canvas(W3chool)  https://www.w3school.com.cn/html5/html_5_canvas.asp

标签

 标签定义图形，比如图标和其它图像，

 标签只是图形容器，必须使用脚本JavaScript来绘制图形

 canvas是一整块的, 里面没有dom这样的对象模型

  这个HTML元素是为了客户端矢量图形而设计的，它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

注意：标签是HTML5中的新标签，IE 8以及更早的版本不支持该标

签

如何使用 标记绘图

大多数 Canvas 绘图 API 都没有定义在 元素本身上，而是定义在

通过画布的 getContext() 方法获得的一个“绘图环境”对象上。

Canvas API 也使用了路径的表示法。但是，路径由一系列的方法调用来定义，而不是描述为字母和数字的字符串，比如调用 beginPath() 和 arc() 方法。

一旦定义了路径，其他的方法，如 fill()，都是对此路径操作。绘图环境的各种属性，比如 fillStyle，说明了这些操作如何使用。

注释：Canvas API 非常紧凑的一个原因上它没有对绘制文本提供任何支持。要把文本加入到一个 图形，必须要么自己绘制它再用位图图像合并它，或者在 上方使用 CSS 定位来覆盖 HTML 文本。

animate的html canvas的简单学习

标签：script   标记   存在   如何使用   nbsp   asp   移动   ext   视频   

原文地址：https://www.cnblogs.com/xyann/p/12488562.html