使用canvas画一个小汽车
在HTML中使用<canvas>标签和JavaScript来绘制一个小汽车是一个有趣的练习。下面是一个简单的示例，展示了如何使用Canvas API来绘制一个基本的小汽车形状。
- HTML结构：
首先，在HTML文件中添加一个<canvas>标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas Car</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script src="script.js"></script>
</body>
</html>
- JavaScript代码 (
script.js文件)：
然后，在JavaScript文件中编写代码来绘制小汽车。
window.onload = function() {
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 绘制车身
ctx.fillStyle = 'blue';
ctx.fillRect(150, 100, 100, 50); // x, y, width, height
// 绘制车窗
ctx.fillStyle = 'white';
ctx.fillRect(165, 115, 70, 30); // x, y, width, height
// 绘制车轮
ctx.beginPath();
ctx.arc(150, 150, 25, 0, Math.PI * 2); // x, y, radius, startAngle, endAngle
ctx.fillStyle = 'black';
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.arc(250, 150, 25, 0, Math.PI * 2); // x, y, radius, startAngle, endAngle
ctx.fillStyle = 'black';
ctx.fill();
ctx.closePath();
// (可选) 添加更多细节，如车门、车灯等
};
这个示例创建了一个简单的蓝色车身，一个白色车窗，和两个黑色的车轮。你可以根据需要添加更多的细节，如车门、车灯、车顶等。Canvas API提供了丰富的绘图功能，包括线条、形状、渐变、图像等，可以用来创建更复杂的图形和动画。
