本篇文章给大家带来的内容是关于html5如何绘制动画？（代码实例） ，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
虽然canvas的api并未直接提供支持动画的方法，但就其本身而言，在canvas中实现动画效果也很简单：只需要持续的更新并重绘画布就行了。这种持续的更新并重绘就叫做动画循环，它是所有动画的核心逻辑。
在canvas中实现动画，首先需要初始化画布上的对象。然后，启动一个动画循环来更新画布、清除画布、重绘画布，再请求下一个新的动画帧。
接下来通过一个简单实例，来看看canvas动画的实现过程。该实例以动画的方式，实现一个旋转的八卦图。代码如下：
function clear() { context.clearrect(0, 0, canvas.width, canvas.height);}function rotate() { context.rotate(math.pi/30); // 每分钟旋转一周}function draw () { // 绘制白色半圆 context.beginpath(); context.arc(0, 0, 80, 1.5*math.pi, math.pi/2, false); context.fillstyle = "white"; context.closepath(); context.fill(); // 绘制黑色半圆 context.beginpath(); context.arc(0, 0, 80, math.pi/2, 1.5*math.pi, false); context.fillstyle = "black"; context.closepath(); context.fill(); // 绘制黑色小圆 context.beginpath(); context.arc(0, 40, 40, 0, math.pi*2, true); context.fillstyle = "black"; context.closepath(); context.fill(); // 绘制白色小圆 context.beginpath(); context.arc(0, -40, 40, 0, math.pi*2, true); context.fillstyle = "white"; context.closepath(); context.fill(); // 绘制白色小圆心 context.beginpath(); context.arc(0, -40, 5, 0, math.pi*2, true); context.fillstyle = "black"; context.closepath(); context.fill(); // 绘制黑色小圆心 context.beginpath(); context.arc(0, 40, 5, 0, math.pi*2, true); context.fillstyle = "white"; context.closepath(); context.fill();}function drawstage() { rotate(); // 更新 clear(); // 清除 draw(); // 重绘}window.onload = function(){ canvas = document.getelementbyid('canvas'); context = canvas.getcontext('2d'); context.translate(canvas.width/2, canvas.height/2); setinterval(drawstage, 100);};
上述代码，当页面加载完成后，首先进行初始化，然后调用setinterval(drawstage, 100)方法启动动画循环，在动画循环中，每隔100ms会调用一次drawstage ()函数，来执行更新画布、清除画布、重绘画布的操作，以实现动画效果。运行结果如图 4‑37 所示：
当然，这里只是为了演示实现动画的原理而已，所以实例相对简单。其实，canvas中的动画可以很简单，也可以很复杂。不管简单还是复杂，其基本原理是完全相同的。
以上就是对html5如何绘制动画？（代码实例） 的全部介绍，如果您想了解更多有关html5视频教程，请关注。
以上就是html5如何绘制动画？（代码实例）的详细内容。