码迷,mamicode.com
首页 > Web开发 > 详细

animate的html canvas的简单学习

时间:2020-03-13 20:31:49      阅读:85      评论:0      收藏:0      [点我收藏+]

标签: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的<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 文档的对象。

animate的html canvas的简单学习

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

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!