在html5中 JavaScript是如何绘制图形和动画的？

<p>HTML5 中的 JavaScript 可以使用 canvas 元素来绘制图形和动画。canvas 是一个可以使用 JavaScript 在其中绘制图形的 HTML 元素。你可以使用 canvas 元素的 getContext() 方法来获取一个画布的绘图上下文，然后使用该上下文的各种方法来绘制图形。</p>
<p>例如，你可以使用 fillRect() 方法在画布上绘制一个矩形，使用 strokeRect() 方法在画布上绘制一个矩形的边框，使用 fillText() 方法在画布上绘制文本，等等。</p>
<p>下面是一个简单的示例，它在画布上绘制一个蓝色的矩形：</p>
<pre><code>&lt;canvas id=&quot;myCanvas&quot; width=&quot;200&quot; height=&quot;100&quot;&gt;&lt;/canvas&gt;

&lt;script&gt;
  var canvas = document.getElementById(&quot;myCanvas&quot;);
  var ctx = canvas.getContext(&quot;2d&quot;);
  ctx.fillStyle = &quot;blue&quot;;
  ctx.fillRect(0, 0, 200, 100);
&lt;/script&gt;
</code></pre>
<p>要绘制动画，你可以使用 requestAnimationFrame() 函数，它会在浏览器重绘时调用你指定的函数。你可以在每次重绘时更新动画中的元素的位置、大小等属性，从而使它们看起来像在动。</p>
<p>下面是一个简单的示例，它在画布上绘制一个旋转的矩形：</p>
<p>```
<canvas id="myCanvas" width="200" height="100"></canvas></p>
<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  var angle = 0;

  function draw() {
    ctx.clearRect(0, 0, 200, 100);
    ctx.save();
    ctx.translate(100, 50