Question

html5用canvas怎么实现动画效果

Answer 1

方法/步骤
素材准备，基本框架的建立。
这里我们让一个有字的图片从左到右运动起来。
1.素材：图片一张。
2.框架的建立（如下图）

3.将图片素材引入网页。
4.定义canvas标签，获取canvas的上下文。
5.定义一个画图片的函数，使用canavs绘图API里面的drawImage来完成。

6.写一个更新的函数，因为我们要让他动起来，所以每时刻绘制的地方都不一样。注意：这儿要用clearRect，这个函数，主要是为了清空画布。

7.写定时函数，每隔0.2秒就更新一次，重新绘制。

我们来看看最终的效果和所有代码吧！

Answer 2

1. 使用HTML5画布能够帮助我们快速实现简单的动画效果，基本原理如下：

2. 每隔一定时间绘制图形并且清除图形，用来模拟出一个动画过程，可以使用context.clearRect(0, 0, x, y)方法来刷新需要绘制的图形

3. function myAnimation() {
      ctx.clearRect(0, 0, canvas_size_x, canvas_size_y);
   
      if (x_icon < 0 || x_icon > canvas_size_x - size_x) {
          stepX = -stepX;
      }
      
      if (y_icon < 0 || y_icon > canvas_size_y - size_y) {
          stepY = -stepY;
      }
   
      x_icon += stepX;
      y_icon += stepY;
   
      ctx.drawImage(anim_img, x_icon, y_icon);
   }
   

4. 以上方法每隔一定时间清除画布内容，并且重新计算绘制图形位置，一旦超过了画布大小，则反转坐标绘制图形。

5. 下面是实际绘制图形方法：

6. function draw() {
      var canvas = document.getElementById("canvas");
      ctx = canvas.getContext("2d");
      
      anim_img = new Image(size_x, size_y);
      
      anim_img.onload = function() {
          setInterval('myAnimation()', 5);
      }
      
      anim_img.src = 'http://www.gbtags.com/gb/networks/avatars/80x8013d6393f-a44c-4180-8cb6-7bf0e4776283.png';
   }
   

7. 以上方法将图形定义，并且调用实际绘制动画的方法，搞定！
   

Answer 3

方法/步骤

使用HTML5画布能够帮助我们快速实现简单的动画效果，基本原理如下：
1、每隔一定时间绘制图形并且清除图形，用来模拟出一个动画过程，可以使用context.clearRect(0, 0, x, y)方法来刷新需要绘制的图形。
function myAnimation() {
ctx.clearRect(0, 0, canvas_size_x, canvas_size_y);

if (x_icon < 0 || x_icon > canvas_size_x - size_x) {
stepX = -stepX;
}

if (y_icon < 0 || y_icon > canvas_size_y - size_y) {
stepY = -stepY;
}

x_icon += stepX;
y_icon += stepY;

ctx.drawImage(anim_img, x_icon, y_icon);
}
以上方法每隔一定时间清除画布内容，并且重新计算绘制图形位置，一旦超过了画布大小，则反转坐标绘制图形。
2、下面是实际绘制图形方法：
function draw() { var canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); anim_img = new Image(size_x, size_y); anim_img.onload = function() { setInterval('myAnimation()', 5); } anim_img.src = 'http://www.gbtags.com/gb/networks/avatars/80x8013d6393f-a44c-4180-8cb6-7bf0e4776283.png';}

以上方法将图形定义，并且调用实际绘制动画的方法，搞定！
如果大家对于HTML5绘制动画有兴趣，加入大家庭529784620

Answer 4

html5网页动画可以利用flash CC或更高版本进行绘制。

1. 下载安装flash CC

2. 新建 html5 canvas项目

3. 绘制canvas界面（类似绘制flash，有点基础就可以很快上手）

4. 点击文件-》发布设置-》选择输出路径（记得勾选发布HTML）

Answer 5

使用HTML5画布能够帮助我们快速实现简单的动画效果，基本原理如下：

每隔一定时间绘制图形并且清除图形，用来模拟出一个动画过程，可以使用context.clearRect(0, 0, x, y)方法来刷新需要绘制的图形

首先是绘制图形的方法，如下：

function myAnimation() {
ctx.clearRect(0, 0, canvas_size_x, canvas_size_y);

if (x_icon < 0 || x_icon > canvas_size_x - size_x) {
stepX = -stepX;
}

if (y_icon < 0 || y_icon > canvas_size_y - size_y) {
stepY = -stepY;
}

x_icon += stepX;
y_icon += stepY;

ctx.drawImage(anim_img, x_icon, y_icon);
}

以上方法每隔一定时间清除画布内容，并且重新计算绘制图形位置，一旦超过了画布大小，则反转坐标绘制图形。

下面是实际绘制图形方法：

function draw() {
var canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");

anim_img = new Image(size_x, size_y);

anim_img.onload = function() {
setInterval('myAnimation()', 5);
}

anim_img.src = 'http://www.gbtags.com/gb/networks/avatars/80x8013d6393f-a44c-4180-8cb6-7bf0e4776283.png';
}

以上方法将图形定义，并且调用实际绘制动画的方法，搞定！