如何用canvas制作动画

canvas制作动画方法如下:

操作方法

  • 01

    先在HTML5页面主体里面添加一个<canvas>标签,定义一张画布(大小,背景颜色)代码 在头部嵌入JS代码,并把画布加载到页当中去,代码如图

  • 02

    在(900,400)半径为30,起点为0的地方,逆时针画一个圆如图

  • 03

    运行程序,如图

  • 04

    创建一个定时函数,时数为50秒如图

  • 05

    创建两个变量(speed ,start)一个间歇函数,设置速度和开始时间如图

  • 06

    以球体运行的开始坐标(start)到终点坐标画一个圆如图

  • 07

    运行程序,结果你会发现如图

  • 08

    小球从右边移动到左边来了,结果如图

(0)

相关推荐

  • 如何用photoshop制作动画?

    photoshop不仅是一款非常强大的图片处理软件,而且还具备动画制作能力.下面,就给大家说说如何用photoshop制作动画. 操作方法 01 首先,打开需要处理的图片素材,这里我们选用的是一个风车 ...

  • 如何用flash制作动画

    对于初学者来说,先学会用flash的每一帧来穿凿动画,现在跟大家分享一下,怎么简单地创造动画吧 操作方法 01 打开flash,新建空白文档 02 点击"文件"选项的"导 ...

  • 如何用剪映APP给视频制作动画效果

    今天给大家介绍一下如何用剪映APP给视频制作动画效果的具体操作步骤.1. 首先打开手机桌面上的剪映APP,然后在首页上方选择"开始创作".2. 然后进入视频选择页面,选好之后,点击 ...

  • 如何用Flash制作逐字显示动画

    Flash是一款功能强大的动画制作工具,有些用户想知道如何用Flash制作逐字显示动画,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步打开电脑中的Flash软件,先打开[新建]窗 ...

  • 如何用AE制作出手写字动画效果?

    After Effects (简称AE)是非常高端的视频特效处理软件,很多大片都使用AE制作各种特效.手写字的动画效果是如何用AE制作的呢? 操作方法 01 打开AE新建一个自己需要的大小合适的合成项 ...

  • 如何用3Dmax制作一个简单的漫游动画

    3Dmax是一款很强大的场景建模和动画制作软件,动画制作并不是什么高大上的东西,常人难以触及,下面小编就来介绍一下简单的漫游动画制作过程. 操作方法 01 三维场景建模(几何图形): 02 材质贴图: ...

  • 如何用flash制作下雪动画:[1]雪花的绘制

    冬天下雪的场景真漂亮啊,小编就想能不能自己用flash软件制作一个下雪的动画呢,小编发现大部分的下雪动画都是用flash的as脚本来制作的,对于很多新手有很大的问题,如何不用AS,自己用FLASH制作 ...

  • 如何用视频制作微信动画表情

    我发布了一个<如何用图片制作微信动画表情>很受欢迎.下面分享如何用一段视频做动画表情. 操作方法 01 首先还是要选择视频素材. 现在本地看一遍. 一定要选择多动动部分.比如我自己的一段游 ...

  • 如何用皮影客制作动画

    皮影客是一款能够让不会画画的人轻松制作动画的平台,快速入门手册可以让你5分钟学会做动画! 操作方法 01 打开皮影客网页,点击制作动画 02 第一步,选择场景 选择一个自己喜欢的场景 03 第二步,选 ...