在html5中 JavaScript是如何绘制图形和动画的?
时间: 2023-01-15 07:23:46 浏览: 105
HTML5 中的 JavaScript 可以使用 canvas 元素来绘制图形和动画。canvas 是一个可以使用 JavaScript 在其中绘制图形的 HTML 元素。你可以使用 canvas 元素的 getContext() 方法来获取一个画布的绘图上下文,然后使用该上下文的各种方法来绘制图形。
例如,你可以使用 fillRect() 方法在画布上绘制一个矩形,使用 strokeRect() 方法在画布上绘制一个矩形的边框,使用 fillText() 方法在画布上绘制文本,等等。
下面是一个简单的示例,它在画布上绘制一个蓝色的矩形:
```
<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>
```
要绘制动画,你可以使用 requestAnimationFrame() 函数,它会在浏览器重绘时调用你指定的函数。你可以在每次重绘时更新动画中的元素的位置、大小等属性,从而使它们看起来像在动。
下面是一个简单的示例,它在画布上绘制一个旋转的矩形:
```
<canvas id="myCanvas" width="200" height="100"></canvas>
<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