canvas教程

[Mugeda HTML5技术教程之5] 创建新作品

字号+ 作者:H5之家 来源:H5之家 2016-01-16 12:03 我要评论( )

[Mugeda HTML5技术教程之5] 创建新作品 前一节,我们介绍了Mugeda Studio。这一节我们讲一下怎么通过Studio创建新作品。首先登陆网站,如果还没有登陆账号,你可以登录免费注册一个。登录网站后,点击网站左侧的“创建作品”,然后从出现的创建列表中选择”

[Mugeda HTML5技术教程之5] 创建新作品

前一节,我们介绍了Mugeda Studio。这一节我们讲一下怎么通过Studio创建新作品。首先登陆网站,如果还没有登陆账号,你可以登录免费注册一个。登录网站后,点击网站左侧的“创建作品”,然后从出现的创建列表中选择”从Mugeda Studio创建”,这样Mugeda Studio的在线集成开发环境会在浏览器窗口中打开了。

QQ截图20150716101331

如果已经在Studio页面想新建另一个作品,可以点击文件菜单下面的“新建”按钮来开始,如图:

QQ截图20150716101645

进入Mugeda Studio后,首先需要选择一个动画尺寸,可以选择预设的尺寸,也可以手动输入自定义尺寸。

QQ截图20150819111222

然后选择画类型,Mugeda支持CSS3 和 Canvas两种不同的HTML5动画。

Canvas是像素级动画,支持的动画效果全面,比如遮罩,但对硬件要求较高。

CSS3是非像素级动画,支持的动画效果不如Canvas,但对设备要求更低。

一般而言CSS3更常用,可以满足基本需求,大多数情况下推荐使用CSS3。

选择完尺寸和类型后,点击确定,关闭对话框。

如果在尺寸选择后你想改变主意,你可以在属性对话框中编辑画布的大小。舞台上没有任何元素被选中或点击舞台的空白区域可以显示舞台的属性。

QQ截图20150716102043

总结:通过上面的讲述,我们可以看到创建一个新作品是一件很轻松的事情,作品建好了,展现动画就需要有动画元素。接下来我们会在下一节讲述如何在新建的作品中添加元素。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • html5canvas核心技术图形、动画与游戏开发源码

    html5canvas核心技术图形、动画与游戏开发源码

    2017-05-02 17:42

  • 打印html5中Canvas的方法

    打印html5中Canvas的方法

    2017-05-01 15:03

  • HTML5+Canvas调用手机拍照功能实现图片上传(下)

    HTML5+Canvas调用手机拍照功能实现图片上传(下)

    2017-04-30 17:00

  • HTML5新特性详解(三)

    HTML5新特性详解(三)

    2017-04-30 16:03

网友点评