利用canvas实现的加载动画效果实例代码

下面将为您详细讲解“利用canvas实现的加载动画效果实例代码”的完整攻略。

1. 创建canvas元素

首先，在HTML页面中创建canvas元素，并且为其设置宽高和样式，如下所示：

<canvas id="myCanvas" width="200" height="200" style="border:1px solid #ccc;"></canvas>

2. 获取canvas上下文

接着，在JavaScript代码中获取canvas元素，并获取它的上下文，代码如下：

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

3. 绘制加载动画

接下来，利用canvas绘制加载动画，具体步骤如下：

步骤1：绘制外圆

首先，绘制一个圆，作为加载动画的外圆，代码如下：

ctx.beginPath();
ctx.arc(100, 100, 80, 0, 2 * Math.PI);
ctx.strokeStyle = "#ccc";
ctx.lineWidth = 10;
ctx.stroke();

步骤2：绘制内圆

接着，在外圆的基础上，再绘制一个圆，作为加载动画的内圆，代码如下：

ctx.beginPath();
ctx.arc(100, 100, 80, 0, 2 * Math.PI);
ctx.strokeStyle = "#ccc";
ctx.lineWidth = 10;
ctx.stroke();

ctx.beginPath();
ctx.arc(100, 100, 80, -90 * Math.PI / 180, (-90 + percent * 3.6) * Math.PI / 180);
ctx.strokeStyle = "#FDB813";
ctx.lineWidth = 10;
ctx.stroke();

步骤3：绘制进度条

最后，在内圆的基础上，绘制进度条，代码如下：

ctx.beginPath();
ctx.arc(100, 100, 80, 0, 2 * Math.PI);
ctx.strokeStyle = "#ccc";
ctx.lineWidth = 10;
ctx.stroke();

ctx.beginPath();
ctx.arc(100, 100, 80, -90 * Math.PI / 180, (-90 + percent * 3.6) * Math.PI / 180);
ctx.strokeStyle = "#FDB813";
ctx.lineWidth = 10;
ctx.stroke();

ctx.font = "bold 40px Arial";
ctx.fillStyle = "#FDB813";
ctx.textAlign = "center";
ctx.fillText(percent + "%", 100,120);

示例说明

示例1：使用canvas绘制简单的加载动画

在第一个示例中，我们只需要简单的绘制一个加载动画，代码如下：

<canvas id="myCanvas" width="200" height="200" style="border:1px solid #ccc;"></canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.arc(100, 100, 80, 0, 2 * Math.PI);
  ctx.strokeStyle = "#ccc";
  ctx.lineWidth = 10;
  ctx.stroke();
</script>

这段代码会在页面中显示一个大小为200x200的圆形加载动画。

示例2：使用canvas绘制带进度的加载动画

在第二个示例中，我们将通过修改代码，实现一个带进度的加载动画，代码如下：

<canvas id="myCanvas" width="200" height="200" style="border:1px solid #ccc;"></canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  var percent = 50; // 在这里设置加载进度，取值范围为0-100

  ctx.beginPath();
  ctx.arc(100, 100, 80, 0, 2 * Math.PI);
  ctx.strokeStyle = "#ccc";
  ctx.lineWidth = 10;
  ctx.stroke();

  ctx.beginPath();
  ctx.arc(100, 100, 80, -90 * Math.PI / 180, (-90 + percent * 3.6) * Math.PI / 180);
  ctx.strokeStyle = "#FDB813";
  ctx.lineWidth = 10;
  ctx.stroke();

  ctx.font = "bold 40px Arial";
  ctx.fillStyle = "#FDB813";
  ctx.textAlign = "center";
  ctx.fillText(percent + "%", 100,120);
</script>

这段代码会在页面中显示一个带进度的加载动画，并且可以通过修改percent的值来控制加载进度。