JavaScript基础——使用Canvas绘图

当谈到在网页上进行绘图时，HTML5提供了一个原生的方法叫做Canvas。Canvas是一个能够在网页上进行绘图的元素，它也是JavaScript中的一种对象。在这篇攻略中，我们将会了解到如何使用Canvas创建和显示图形。

创建Canvas元素

我们可以通过以下语句创建一个Canvas元素：

<canvas id="myCanvas"></canvas>

在这个例子中，我们创建了一个id为myCanvas的画布。你可以根据需要给你的Canvas元素命名一个不同的id。

获取Canvas上下文

我们需要通过JavaScript获取Canvas的上下文，这样我们才能操作Canvas。这里提供了两种方法：

方法1：使用`getContext`方法

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

在这个例子中，我们首先通过getElementById方法获取了Canvas元素，然后通过getContext方法获取了Canvas的上下文。getContext方法接受一个参数来指定上下文类型，在这个例子中我们使用的是2D上下文，因此我们传入字符串"2d"。

方法2：直接在HTML中指定上下文类型

另外，我们也可以在Canvas元素的<canvas>标签中直接指定上下文类型，如下所示：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
  Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
</script>

在这个例子中，我们通过<canvas>标签中的width和height属性指定了Canvas元素的大小，通过style属性指定了边框样式和颜色。注意，在<canvas>标签中间的内容是在不支持Canvas的浏览器中显示的提示内容。

在Canvas上绘制图形

当我们获取了Canvas的上下文后，就可以使用它来绘制图形了。我们可以在Canvas上绘制直线、曲线、矩形、弧形等等。

绘制矩形

使用Canvas绘制矩形非常简单：

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

ctx.fillStyle = "#FF0000"; // 设置填充颜色
ctx.fillRect(0,0,150,75); // 绘制矩形

在这个例子中，我们首先指定了填充颜色为红色。然后使用fillRect方法绘制一个起点坐标为(0,0)，宽150，高75的矩形。如果我们需要描边而非填充，则可以使用strokeRect方法。

绘制弧形

使用Canvas绘制弧形同样非常简单：

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

ctx.beginPath(); // 开始路径
ctx.arc(75,75,50,0,Math.PI*2,true); // 绘制弧形
ctx.fillStyle = "blue";
ctx.fill(); // 填充颜色

在这个例子中，我们首先通过beginPath方法开始路径。然后使用arc方法绘制一个圆心坐标为(75,75)，半径为50的圆。最后填充颜色为蓝色。参数Math.PI*2等价于360度的角度。绘制弧形同样适用于扇形的绘制。只需要在arc方法的最后一个参数中指定false即可。

示例说明

以下两个示例代码为一个Canvas绘制圆弧形的动画。

<!DOCTYPE html>
<html>
<body>

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

  <script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var x = canvas.width / 2;
    var y = canvas.height / 2;
    var radius = 75;
    var endAngle = 0;

    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      ctx.beginPath();
      ctx.arc(x, y, radius, 0, endAngle);
      ctx.lineWidth = 10;
      ctx.strokeStyle = "#0095DD";
      ctx.stroke();

      if (endAngle < (Math.PI * 2)) {
        endAngle += 0.1;
      } else {
        endAngle = 0;
      }

      requestAnimationFrame(draw);
    }

    draw();

  </script>

</body>
</html>

在这个例子中，我们绘制了一个半径为75的圆弧形，初始角度为0。我们使用requestAnimationFrame方法在每一帧都绘制圆弧形，并在结束时将角度重置为0，从而形成一个动画。

<!DOCTYPE html>
<html>
<body>

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

  <script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var x = canvas.width / 2;
    var y = canvas.height / 2;
    var radius = 75;
    var endAngle = 0;

    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      ctx.beginPath();
      ctx.arc(x, y, radius, 0, endAngle);
      ctx.lineWidth = 10;
      ctx.strokeStyle = "#0095DD";
      ctx.stroke();

      if (endAngle < (Math.PI * 2)) {
        endAngle += 0.1;
      } else {
        endAngle = 0;
      }

      setTimeout(draw, 10);
    }

    draw();

  </script>

</body>
</html>

在这个例子中，我们同样绘制了一个画布，在绘制过程中，我们使用了setTimeout方法控制帧速率。每一帧之间的延迟时间为10ms。帧速率等于1000/10=100fps。

这些只是Canvas的一些基础知识点，它还有更多的内容可以去探索。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript基础——使用Canvas绘图 - Python技术站