<p>HTML5 中的 JavaScript 可以使用 canvas 元素来绘制图形和动画。canvas 是一个可以使用 JavaScript 在其中绘制图形的 HTML 元素。你可以使用 canvas 元素的 getContext() 方法来获取一个画布的绘图上下文,然后使用该上下文的各种方法来绘制图形。</p>
<p>例如,你可以使用 fillRect() 方法在画布上绘制一个矩形,使用 strokeRect() 方法在画布上绘制一个矩形的边框,使用 fillText() 方法在画布上绘制文本,等等。</p>
<p>下面是一个简单的示例,它在画布上绘制一个蓝色的矩形:</p>
<pre><code><canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 200, 100);
</script>
</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