animate的html canvas的简单学习

性能问题

使用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的<canvas>元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

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

<canvas>标签

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

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

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

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

 

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

签

 

如何使用 <canvas> 标记绘图

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

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

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

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

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

 

什么是 DOM？通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目

。要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。

这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。

DOM 被分为不同的部分（核心、XML及HTML）和级别（DOM Level 1/2/3）：Core DOM定义了一套标准的针对任何结构化文档的对象，

XML DOM 定义了一套标准的针对 XML 文档的对象HTML DOM定义了一套标准的针对 HTML 文档的对象。