使用html5制作loading图的示例

使用HTML5制作loading图的示例是相当广泛的。下面就为大家介绍一下如何制作loading图的具体步骤。

步：创建画布

我们需要先在HTML中创建一个画布，代码如下：

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

这里需要注意的是，我们在canvas标签中使用了id属性来标识这个画布，因为在后面的JavaScript代码中我们需要使用这个id来获取这个canvas对象。

第二步：绘制loading图

我们需要在canvas中绘制一个loading图。代码如下：

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

var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 30;
var startAngle = 0;
var endAngle = Math.PI * 2;

ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle);
ctx.strokeStyle = "black";
ctx.lineWidth = 3;
ctx.stroke();

这里需要注意的是，我们在canvas中调用了getContext方法来获取2d绘图上下文，然后使用了arc方法来绘制了一个圆形。我们还设置了这个圆形的线条颜色和线条宽度。

第三步：制作旋转效果

我们需要使用setInterval方法来制作旋转效果。代码如下：

var angle = 0;
var intervalId = setInterval(function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(x, y, radius, startAngle, endAngle);
    ctx.strokeStyle = "black";
    ctx.lineWidth = 3;
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x + radius * Math.cos(angle), y + radius * Math.sin(angle));
    ctx.strokeStyle = "red";
    ctx.lineWidth = 3;
    ctx.stroke();

    angle += 0.1;
}, 50);

我们设置了一个angle变量，用来记录旋转的角度。然后使用setInterval方法来定时执行描绘旋转的代码。在每次绘制之前，我们先使用clearRect方法来清除之前的绘制，然后再绘制一个新的圆形和一条从圆心指向旋转角度的线段。

第四步：停止旋转效果

我们需要使用clearInterval方法来停止旋转效果。代码如下：

setTimeout(function() {
    clearInterval(intervalId);
}, 5000);

我们使用setTimeout方法在5秒后调用clearInterval方法，以停止旋转效果。

综上所述，使用HTML5制作loading图的示例就完成了。我们首先需要创建一个canvas画布，然后在画布中绘制loading图，最后制作旋转效果并在一定的时间后停止旋转效果，从而达到动态展示loading状态的目的。