HTML5中制作动画效果是现如今很流行的一个技术，它的主要工具便是Canvas与JavaScript。下面我们将一步步的教您如何制作一个动画效果。首先，为了能让画布在浏览器中显示出来，我们需要在HTML中添加canvas标签，并设置id属性来表明其名字。

<canvas  width="500" height="500"></canvas>

然后，我们需要在JavaScript中通过id获取到这个canvas标签，才能对其进行操作。

var canvas=document.getElementById('myCanvas');

接下来，我们需要定义一个Context对象，它将负责处理所有的canvas图形绘制操作。

var cxt=canvas.getContext('2d');

然后，我们可以开始绘制图形了，比如绘制一个圆形。

cxt.beginPath();//开始绘制路径cxt.arc(250, 250, 50, 0, Math.PI*2, false);//绘制圆形cxt.closePath();//关闭路径cxt.fillStyle="#FF0000";//填充颜色为红色cxt.fill();//填充圆形

这样，我们就可以看到一个红色的圆形了。接下来，我们可以定义一个动画函数，并利用setInterval函数来不断调用它，以达到动画效果。

function animate(){//清除画布，以便每次重新绘制cxt.clearRect(0, 0, canvas.width, canvas.height);//绘制新的图形cxt.beginPath();cxt.arc(250, 250, 50, 0, Math.PI*2, false);cxt.closePath();cxt.fillStyle="#FF0000";cxt.fill();//动画效果的实现//......}setInterval(animate, 30);

在动画函数中，我们需要对旧图形进行清除操作（这里使用了clearRect函数），然后重新绘制新的图形。接着，在这个函数中，我们可以实现一些动画效果，比如让圆形进行移动等。最后，我们需要在JavaScript中添加一些事件，比如鼠标的点击事件，以便触发动画效果。

canvas.addEventListener('click', function(){//执行动画函数setInterval(animate, 30);})

这样一来，当我们点击canvas标签时，就会触发动画效果了。当然，这只是一个简单的动画效果，您可以利用Canvas和JavaScript实现更加复杂的动画效果，例如游戏中的精灵动画等。