使用canvas画一个小汽车

最新推荐文章于 2025-03-19 09:07:02 发布

王铁柱666

最新推荐文章于 2025-03-19 09:07:02 发布

阅读量404

点赞数 9

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/2401_87873725/article/details/142893111

版权

在前端开发中，使用HTML的<canvas>元素可以绘制各种图形，包括小汽车。以下是一个简单的示例，展示了如何使用Canvas API来绘制一个小汽车：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 小汽车</title>
</head>
<body>
    <canvas id="carCanvas" width="800" height="600" style="border:1px solid #000;"></canvas>
    <script>
        const canvas = document.getElementById('carCanvas');
        const ctx = canvas.getContext('2d');

        // 绘制车身
        ctx.fillStyle = 'blue';
        ctx.fillRect(350, 200, 100, 150);

        // 绘制车窗
        ctx.fillStyle = 'white';
        ctx.fillRect(370, 250, 60, 80);

        // 绘制车轮
        ctx.beginPath();
        ctx.arc(350, 350, 50, 0, Math.PI * 2);
        ctx.fillStyle = 'black';
        ctx.fill();
        ctx.closePath();

        ctx.beginPath();
        ctx.arc(450, 350, 50, 0, Math.PI * 2);
        ctx.fillStyle = 'black';
        ctx.fill();
        ctx.closePath();

        // 绘制车灯
        ctx.fillStyle = 'yellow';
        ctx.fillRect(330, 200, 20, 20);
        ctx.fillRect(470, 200, 20, 20);
    </script>
</body>
</html>