使用canvas实现宝马bmw图标特效

使用 HTML5 的 <canvas> 元素来绘制宝马（BMW）的图标可能是一个复杂的任务，因为你需要精确地复制其标志的形状和颜色。以下是一个简化的示例，展示了如何使用 <canvas> 创建一个类似宝马标志的形状。请注意，这只是一个大致的示例，并不完全复制宝马的官方标志。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BMW Logo with Canvas</title>
</head>
<body>
    <canvas id="bmwCanvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById('bmwCanvas');
        const ctx = canvas.getContext('2d');

        // 设置绘图样式
        ctx.strokeStyle = '#FFFFFF';
        ctx.lineWidth = 4;

        // 绘制外圆
        ctx.beginPath();
        ctx.arc(200, 200, 100, 0, Math.PI * 2);
        ctx.stroke();

        // 绘制内圆（代表宝马标志中的蓝色和白色部分）
        ctx.beginPath();
        ctx.arc(200, 200, 60, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fillStyle = '#0066CC'; // 蓝色部分
        ctx.fill();

        // 绘制两个半圆以形成宝马标志的分割效果
        ctx.beginPath();
        ctx.arc(200, 200, 60, 0, Math.PI); // 上半圆
        ctx.lineWidth = 6;
        ctx.strokeStyle = '#FFFFFF'; // 白色分割线
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(200, 230, 30, 0, Math.PI * 2); // 小圆，代表宝马标志中的白色小圆点
        ctx.fillStyle = '#FFFFFF'; // 白色小圆点
        ctx.fill();

        // 你可以继续添加更多的细节来使标志更接近宝马的官方标志。
    </script>
</body>
</html>