使用canvas画一个羽毛球

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

  1. HTML结构：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绘制羽毛球</title>
</head>
<body>
    <canvas id="badmintonCanvas" width="400" height="400"></canvas>
    <script src="script.js"></script>
</body>
</html>
  1. JavaScript代码 (script.js文件)：
window.onload = function() {
    const canvas = document.getElementById('badmintonCanvas');
    const ctx = canvas.getContext('2d');

    // 绘制羽毛球的球体
    ctx.beginPath();
    ctx.arc(200, 200, 50, 0, Math.PI * 2); // 在(200, 200)位置绘制半径为50的圆
    ctx.fillStyle = 'white'; // 设置填充颜色为白色
    ctx.fill(); // 填充圆形
    ctx.strokeStyle = 'black'; // 设置描边颜色为黑色
    ctx.stroke(); // 描边圆形

    // 绘制羽毛球的羽毛部分（简化为16条线段）
    const featherLength = 70; // 羽毛长度
    const featherWidth = 10; // 羽毛宽度（实际上羽毛球的羽毛是片状的，这里简化为线段）
    const featherAngleStep = Math.PI / 8; // 羽毛之间的角度步长
    ctx.strokeStyle = 'black'; // 设置羽毛的颜色为黑色

    for (let i = 0; i < 16; i++) {
        const angle = i * featherAngleStep; // 计算当前羽毛的角度
        const xStart = 200 + 50 * Math.cos(angle); // 计算羽毛起点的x坐标
        const yStart = 200 + 50 * Math.sin(angle); // 计算羽毛起点的y坐标
        const xEnd = xStart + featherLength * Math.cos(angle + Math.PI / 2); // 计算羽毛终点的x坐标（垂直于当前角度）
        const yEnd = yStart + featherLength * Math.sin(angle + Math.PI / 2); // 计算羽毛终点的y坐标（垂直于当前角度）

        ctx.beginPath();
        ctx.moveTo(xStart, yStart); // 移动到羽毛起点
        ctx.lineTo(xEnd, yEnd); // 绘制到羽毛终点
        ctx.lineWidth = featherWidth; // 设置线条宽度
        ctx.stroke(); // 描边线条，形成羽毛
    }
};

这段代码首先定义了一个HTML结构，其中包含一个<canvas>元素。然后，在JavaScript中，我们获取了这个<canvas>元素的上下文，并使用Canvas API来绘制羽毛球。首先，我们绘制了一个白色的圆形来表示羽毛球的球体部分，并使用黑色描边。然后，我们使用一个循环来绘制16条线段，表示羽毛球的羽毛部分。每条线段都从一个在球体边缘的点开始，并沿着与球体边缘垂直的方向延伸出去。

posted @ 2024-12-29 06:15  王铁柱6  阅读(38)  评论(0)    收藏  举报