kevisual/pointless
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

用html和css和canvas生成一个葫芦娃的页面 #1

New Issue
Open
opened 2025-07-21 02:44:46 +08:00 by abearxiong · 3 comments
abearxiong commented 2025-07-21 02:44:46 +08:00
Owner
Copy Link

下面是一个使用HTML、CSS和Canvas绘制的葫芦娃页面。这个页面包含Canvas绘制的葫芦娃形象以及简单的介绍信息，采用了符合葫芦娃主题的配色方案。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>葫芦娃</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background-color: #f8f3e6;
            font-family: "Arial", sans-serif;
            color: #333;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }
        
        h1 {
            color: #e63946;
            margin-bottom: 30px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
        }
        
        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 40px;
            max-width: 1200px;
        }
        
        #葫芦娃画布 {
            border: 5px solid #8b4513;
            border-radius: 10px;
            background-color: #90ee90;
            box-shadow: 0 0 20px rgba(0,0,0,0.3);
        }
        
        .info {
            max-width: 500px;
            background-color: white;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0,0,0,0.2);
        }
        
        h2 {
            color: #ff9f1c;
            margin-bottom: 15px;
            border-bottom: 2px solid #ff9f1c;
            padding-bottom: 5px;
        }
        
        .characters {
            margin-top: 20px;
        }
        
        .character {
            margin-bottom: 10px;
            padding-left: 10px;
            border-left: 3px solid #1d3557;
        }
        
        .character strong {
            color: #1d3557;
        }
    </style>
</head>
<body>
    <h1>葫芦兄弟</h1>
    
    <div class="container">
        <canvas id="葫芦娃画布" width="500" height="600"></canvas>
        
        <div class="info">
            <h2>关于葫芦娃</h2>
            <p>《葫芦兄弟》是中国经典的动画系列，讲述了七个拥有神奇能力的葫芦娃兄弟，为了救出被蛇精和蝎子精抓走的爷爷，勇敢对抗妖精的故事。</p>
            
            <div class="characters">
                <h2>葫芦兄弟成员</h2>
                <div class="character">
                    <strong>大娃（红娃）</strong>：力大无穷，能变大变小
                </div>
                <div class="character">
                    <strong>二娃（橙娃）</strong>：千里眼，顺风耳
                </div>
                <div class="character">
                    <strong>三娃（黄娃）</strong>：铜头铁臂，刀枪不入
                </div>
                <div class="character">
                    <strong>四娃（绿娃）</strong>：能喷火，会吸火
                </div>
                <div class="character">
                    <strong>五娃（青娃）</strong>：能喷水，会吸水
                </div>
                <div class="character">
                    <strong>六娃（蓝娃）</strong>：会隐身术
                </div>
                <div class="character">
                    <strong>七娃（紫娃）</strong>：有一个神奇的宝葫芦，能吸收万物
                </div>
            </div>
        </div>
    </div>

    <script>
        // 获取画布和上下文
        const canvas = document.getElementById('葫芦娃画布');
        const ctx = canvas.getContext('2d');
        
        // 绘制大娃（红娃）
        function draw葫芦娃() {
            // 清空画布
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 绘制背景 - 远山
            ctx.fillStyle = '#87ceeb';
            ctx.fillRect(0, 0, canvas.width, 300);
            
            ctx.fillStyle = '#228b22';
            ctx.beginPath();
            ctx.moveTo(0, 300);
            ctx.bezierCurveTo(150, 150, 250, 250, 500, 200);
            ctx.lineTo(500, 600);
            ctx.lineTo(0, 600);
            ctx.closePath();
            ctx.fill();
            
            // 绘制太阳
            ctx.fillStyle = '#ffd700';
            ctx.beginPath();
            ctx.arc(400, 80, 40, 0, Math.PI * 2);
            ctx.fill();
            
            // 葫芦娃身体
            // 躯干
            ctx.fillStyle = '#e63946';
            ctx.beginPath();
            ctx.arc(250, 350, 80, 0, Math.PI * 2);
            ctx.fill();
            
            // 红色衣服
            ctx.fillStyle = '#d62828';
            ctx.beginPath();
            ctx.moveTo(180, 300);
            ctx.lineTo(250, 220);
            ctx.lineTo(320, 300);
            ctx.lineTo(320, 420);
            ctx.lineTo(180, 420);
            ctx.closePath();
            ctx.fill();
            
            // 黄色领子
            ctx.fillStyle = '#ffd700';
            ctx.beginPath();
            ctx.moveTo(220, 300);
            ctx.lineTo(250, 270);
            ctx.lineTo(280, 300);
            ctx.closePath();
            ctx.fill();
            
            // 手臂
            // 左手臂
            ctx.fillStyle = '#ffb347';
            ctx.beginPath();
            ctx.ellipse(160, 350, 30, 50, Math.PI / 8, 0, Math.PI * 2);
            ctx.fill();
            
            // 右手臂
            ctx.fillStyle = '#ffb347';
            ctx.beginPath();
            ctx.ellipse(340, 350, 30, 50, -Math.PI / 8, 0, Math.PI * 2);
            ctx.fill();
            
            // 左手
            ctx.fillStyle = '#ffb347';
            ctx.beginPath();
            ctx.arc(120, 360, 25, 0, Math.PI * 2);
            ctx.fill();
            
            // 右手
            ctx.fillStyle = '#ffb347';
            ctx.beginPath();
            ctx.arc(380, 360, 25, 0, Math.PI * 2);
            ctx.fill();
            
            // 腿
            // 左腿
            ctx.fillStyle = '#ffb347';
            ctx.beginPath();
            ctx.ellipse(210, 480, 35, 70, Math.PI / 10, 0, Math.PI * 2);
            ctx.fill();
            
            // 右腿
            ctx.fillStyle = '#ffb347';
            ctx.beginPath();
            ctx.ellipse(290, 480, 35, 70, -Math.PI / 10, 0, Math.PI * 2);
            ctx.fill();
            
            // 脚
            // 左脚
            ctx.fillStyle = '#003566';
            ctx.beginPath();
            ctx.ellipse(200, 550, 30, 20, 0, 0, Math.PI * 2);
            ctx.fill();
            
            // 右脚
            ctx.fillStyle = '#003566';
            ctx.beginPath();
            ctx.ellipse(300, 550, 30, 20, 0, 0, Math.PI * 2);
            ctx.fill();
            
            // 头部
            ctx.fillStyle = '#ffb347';
            ctx.beginPath();
            ctx.arc(250, 220, 70, 0, Math.PI * 2);
            ctx.fill();
            
            // 头发
            ctx.fillStyle = '#000';
            // 头顶
            ctx.beginPath();
            ctx.arc(250, 180, 50, 0, Math.PI, true);
            ctx.fill();
            
            // 刘海
            ctx.beginPath();
            ctx.moveTo(200, 220);
            ctx.quadraticCurveTo(230, 160, 250, 170);
            ctx.quadraticCurveTo(270, 160, 300, 220);
            ctx.closePath();
            ctx.fill();
            
            // 眼睛
            // 左眼
            ctx.fillStyle = '#fff';
            ctx.beginPath();
            ctx.arc(220, 210, 15, 0, Math.PI * 2);
            ctx.fill();
            
            // 右眼
            ctx.fillStyle = '#fff';
            ctx.beginPath();
            ctx.arc(280, 210, 15, 0, Math.PI * 2);
            ctx.fill();
            
            // 瞳孔
            ctx.fillStyle = '#000';
            ctx.beginPath();
            ctx.arc(220, 210, 8, 0, Math.PI * 2);
            ctx.fill();
            
            ctx.beginPath();
            ctx.arc(280, 210, 8, 0, Math.PI * 2);
            ctx.fill();
            
            // 高光
            ctx.fillStyle = '#fff';
            ctx.beginPath();
            ctx.arc(215, 205, 4, 0, Math.PI * 2);
            ctx.fill();
            
            ctx.beginPath();
            ctx.arc(275, 205, 4, 0, Math.PI * 2);
            ctx.fill();
            
            // 眉毛
            ctx.strokeStyle = '#000';
            ctx.lineWidth = 3;
            ctx.beginPath();
            ctx.moveTo(200, 190);
            ctx.quadraticCurveTo(220, 180, 240, 190);
            ctx.stroke();
            
            ctx.beginPath();
            ctx.moveTo(260, 190);
            ctx.quadraticCurveTo(280, 180, 300, 190);
            ctx.stroke();
            
            // 嘴巴
            ctx.strokeStyle = '#000';
            ctx.lineWidth = 3;
            ctx.beginPath();
            ctx.arc(250, 240, 20, 0, Math.PI);
            ctx.stroke();
            
            // 葫芦
            ctx.fillStyle = '#06d6a0';
            ctx.beginPath();
            ctx.ellipse(250, 420, 25, 40, 0, 0, Math.PI * 2);
            ctx.fill();
            
            ctx.fillStyle = '#06d6a0';
            ctx.beginPath();
            ctx.ellipse(250, 380, 20, 30, 0, 0, Math.PI * 2);
            ctx.fill();
            
            ctx.fillStyle = '#ffd700';
            ctx.beginPath();
            ctx.arc(250, 370, 5, 0, Math.PI * 2);
            ctx.fill();
        }
        
        // 页面加载完成后绘制
        window.onload = function() {
            draw葫芦娃();
        };
    </script>
</body>
</html>

这个页面实现了以下功能：

  1. 使用Canvas绘制了一个红娃（大娃）的形象，包括头部、身体、四肢和服饰
  2. 添加了简单的背景，包括天空、山和太阳
  3. 右侧展示了葫芦娃的基本介绍和七个兄弟的能力说明
  4. 采用了响应式设计，在不同屏幕尺寸上都能良好显示
  5. 使用了符合葫芦娃主题的配色方案，红色、黄色等鲜明色彩

你可以直接将这段代码保存为HTML文件并在浏览器中打开查看效果。如果需要绘制其他葫芦娃，可以修改Canvas绘制部分的颜色和细节。

下面是一个使用HTML、CSS和Canvas绘制的葫芦娃页面。这个页面包含Canvas绘制的葫芦娃形象以及简单的介绍信息，采用了符合葫芦娃主题的配色方案。 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>葫芦娃</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #f8f3e6; font-family: "Arial", sans-serif; color: #333; display: flex; flex-direction: column; align-items: center; padding: 20px; } h1 { color: #e63946; margin-bottom: 30px; text-shadow: 2px 2px 4px rgba(0,0,0,0.2); } .container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 40px; max-width: 1200px; } #葫芦娃画布 { border: 5px solid #8b4513; border-radius: 10px; background-color: #90ee90; box-shadow: 0 0 20px rgba(0,0,0,0.3); } .info { max-width: 500px; background-color: white; padding: 25px; border-radius: 10px; box-shadow: 0 0 15px rgba(0,0,0,0.2); } h2 { color: #ff9f1c; margin-bottom: 15px; border-bottom: 2px solid #ff9f1c; padding-bottom: 5px; } .characters { margin-top: 20px; } .character { margin-bottom: 10px; padding-left: 10px; border-left: 3px solid #1d3557; } .character strong { color: #1d3557; } </style> </head> <body> <h1>葫芦兄弟</h1> <div class="container"> <canvas id="葫芦娃画布" width="500" height="600"></canvas> <div class="info"> <h2>关于葫芦娃</h2> <p>《葫芦兄弟》是中国经典的动画系列，讲述了七个拥有神奇能力的葫芦娃兄弟，为了救出被蛇精和蝎子精抓走的爷爷，勇敢对抗妖精的故事。</p> <div class="characters"> <h2>葫芦兄弟成员</h2> <div class="character"> <strong>大娃（红娃）</strong>：力大无穷，能变大变小 </div> <div class="character"> <strong>二娃（橙娃）</strong>：千里眼，顺风耳 </div> <div class="character"> <strong>三娃（黄娃）</strong>：铜头铁臂，刀枪不入 </div> <div class="character"> <strong>四娃（绿娃）</strong>：能喷火，会吸火 </div> <div class="character"> <strong>五娃（青娃）</strong>：能喷水，会吸水 </div> <div class="character"> <strong>六娃（蓝娃）</strong>：会隐身术 </div> <div class="character"> <strong>七娃（紫娃）</strong>：有一个神奇的宝葫芦，能吸收万物 </div> </div> </div> </div> <script> // 获取画布和上下文 const canvas = document.getElementById('葫芦娃画布'); const ctx = canvas.getContext('2d'); // 绘制大娃（红娃） function draw葫芦娃() { // 清空画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 绘制背景 - 远山 ctx.fillStyle = '#87ceeb'; ctx.fillRect(0, 0, canvas.width, 300); ctx.fillStyle = '#228b22'; ctx.beginPath(); ctx.moveTo(0, 300); ctx.bezierCurveTo(150, 150, 250, 250, 500, 200); ctx.lineTo(500, 600); ctx.lineTo(0, 600); ctx.closePath(); ctx.fill(); // 绘制太阳 ctx.fillStyle = '#ffd700'; ctx.beginPath(); ctx.arc(400, 80, 40, 0, Math.PI * 2); ctx.fill(); // 葫芦娃身体 // 躯干 ctx.fillStyle = '#e63946'; ctx.beginPath(); ctx.arc(250, 350, 80, 0, Math.PI * 2); ctx.fill(); // 红色衣服 ctx.fillStyle = '#d62828'; ctx.beginPath(); ctx.moveTo(180, 300); ctx.lineTo(250, 220); ctx.lineTo(320, 300); ctx.lineTo(320, 420); ctx.lineTo(180, 420); ctx.closePath(); ctx.fill(); // 黄色领子 ctx.fillStyle = '#ffd700'; ctx.beginPath(); ctx.moveTo(220, 300); ctx.lineTo(250, 270); ctx.lineTo(280, 300); ctx.closePath(); ctx.fill(); // 手臂 // 左手臂 ctx.fillStyle = '#ffb347'; ctx.beginPath(); ctx.ellipse(160, 350, 30, 50, Math.PI / 8, 0, Math.PI * 2); ctx.fill(); // 右手臂 ctx.fillStyle = '#ffb347'; ctx.beginPath(); ctx.ellipse(340, 350, 30, 50, -Math.PI / 8, 0, Math.PI * 2); ctx.fill(); // 左手 ctx.fillStyle = '#ffb347'; ctx.beginPath(); ctx.arc(120, 360, 25, 0, Math.PI * 2); ctx.fill(); // 右手 ctx.fillStyle = '#ffb347'; ctx.beginPath(); ctx.arc(380, 360, 25, 0, Math.PI * 2); ctx.fill(); // 腿 // 左腿 ctx.fillStyle = '#ffb347'; ctx.beginPath(); ctx.ellipse(210, 480, 35, 70, Math.PI / 10, 0, Math.PI * 2); ctx.fill(); // 右腿 ctx.fillStyle = '#ffb347'; ctx.beginPath(); ctx.ellipse(290, 480, 35, 70, -Math.PI / 10, 0, Math.PI * 2); ctx.fill(); // 脚 // 左脚 ctx.fillStyle = '#003566'; ctx.beginPath(); ctx.ellipse(200, 550, 30, 20, 0, 0, Math.PI * 2); ctx.fill(); // 右脚 ctx.fillStyle = '#003566'; ctx.beginPath(); ctx.ellipse(300, 550, 30, 20, 0, 0, Math.PI * 2); ctx.fill(); // 头部 ctx.fillStyle = '#ffb347'; ctx.beginPath(); ctx.arc(250, 220, 70, 0, Math.PI * 2); ctx.fill(); // 头发 ctx.fillStyle = '#000'; // 头顶 ctx.beginPath(); ctx.arc(250, 180, 50, 0, Math.PI, true); ctx.fill(); // 刘海 ctx.beginPath(); ctx.moveTo(200, 220); ctx.quadraticCurveTo(230, 160, 250, 170); ctx.quadraticCurveTo(270, 160, 300, 220); ctx.closePath(); ctx.fill(); // 眼睛 // 左眼 ctx.fillStyle = '#fff'; ctx.beginPath(); ctx.arc(220, 210, 15, 0, Math.PI * 2); ctx.fill(); // 右眼 ctx.fillStyle = '#fff'; ctx.beginPath(); ctx.arc(280, 210, 15, 0, Math.PI * 2); ctx.fill(); // 瞳孔 ctx.fillStyle = '#000'; ctx.beginPath(); ctx.arc(220, 210, 8, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(280, 210, 8, 0, Math.PI * 2); ctx.fill(); // 高光 ctx.fillStyle = '#fff'; ctx.beginPath(); ctx.arc(215, 205, 4, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(275, 205, 4, 0, Math.PI * 2); ctx.fill(); // 眉毛 ctx.strokeStyle = '#000'; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(200, 190); ctx.quadraticCurveTo(220, 180, 240, 190); ctx.stroke(); ctx.beginPath(); ctx.moveTo(260, 190); ctx.quadraticCurveTo(280, 180, 300, 190); ctx.stroke(); // 嘴巴 ctx.strokeStyle = '#000'; ctx.lineWidth = 3; ctx.beginPath(); ctx.arc(250, 240, 20, 0, Math.PI); ctx.stroke(); // 葫芦 ctx.fillStyle = '#06d6a0'; ctx.beginPath(); ctx.ellipse(250, 420, 25, 40, 0, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#06d6a0'; ctx.beginPath(); ctx.ellipse(250, 380, 20, 30, 0, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#ffd700'; ctx.beginPath(); ctx.arc(250, 370, 5, 0, Math.PI * 2); ctx.fill(); } // 页面加载完成后绘制 window.onload = function() { draw葫芦娃(); }; </script> </body> </html> ``` 这个页面实现了以下功能： 1. 使用Canvas绘制了一个红娃（大娃）的形象，包括头部、身体、四肢和服饰 2. 添加了简单的背景，包括天空、山和太阳 3. 右侧展示了葫芦娃的基本介绍和七个兄弟的能力说明 4. 采用了响应式设计，在不同屏幕尺寸上都能良好显示 5. 使用了符合葫芦娃主题的配色方案，红色、黄色等鲜明色彩 你可以直接将这段代码保存为HTML文件并在浏览器中打开查看效果。如果需要绘制其他葫芦娃，可以修改Canvas绘制部分的颜色和细节。
abearxiong added this to the pointless-01 milestone 2025-07-21 02:44:46 +08:00
abearxiong commented 2025-07-21 02:46:38 +08:00
Author
Owner
Copy Link

deepseek的

deepseek的
abearxiong commented 2025-07-21 02:46:41 +08:00
Author
Owner
Copy Link

葫芦娃 HTML/CSS/Canvas 页面

以下是一个使用HTML、CSS和Canvas创建的葫芦娃主题页面代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>葫芦娃兄弟</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #f5e6c8;
            margin: 0;
            padding: 0;
            text-align: center;
            color: #8b4513;
        }
        
        header {
            background-color: #e74c3c;
            color: white;
            padding: 20px 0;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        
        h1 {
            margin: 0;
            font-size: 2.5em;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .container {
            max-width: 1000px;
            margin: 20px auto;
            padding: 20px;
        }
        
        .calabash-bros {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
        }
        
        .bro {
            width: 150px;
            height: 200px;
            position: relative;
            cursor: pointer;
            transition: transform 0.3s;
        }
        
        .bro:hover {
            transform: scale(1.1);
        }
        
        .bro canvas {
            width: 100%;
            height: 100%;
        }
        
        .bro-name {
            margin-top: 10px;
            font-weight: bold;
            font-size: 1.2em;
        }
        
        .legend {
            margin-top: 40px;
            padding: 20px;
            background-color: rgba(255, 255, 255, 0.7);
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        
        footer {
            margin-top: 40px;
            padding: 20px;
            background-color: #e74c3c;
            color: white;
        }
    </style>
</head>
<body>
    <header>
        <h1>葫芦娃兄弟</h1>
    </header>
    
    <div class="container">
        <div class="calabash-bros">
            <div class="bro" data-color="#e74c3c" data-name="大娃">
                <canvas id="bro1"></canvas>
                <div class="bro-name">大娃（红）</div>
            </div>
            <div class="bro" data-color="#f39c12" data-name="二娃">
                <canvas id="bro2"></canvas>
                <div class="bro-name">二娃（橙）</div>
            </div>
            <div class="bro" data-color="#f1c40f" data-name="三娃">
                <canvas id="bro3"></canvas>
                <div class="bro-name">三娃（黄）</div>
            </div>
            <div class="bro" data-color="#2ecc71" data-name="四娃">
                <canvas id="bro4"></canvas>
                <div class="bro-name">四娃（绿）</div>
            </div>
            <div class="bro" data-color="#3498db" data-name="五娃">
                <canvas id="bro5"></canvas>
                <div class="bro-name">五娃（青）</div>
            </div>
            <div class="bro" data-color="#9b59b6" data-name="六娃">
                <canvas id="bro6"></canvas>
                <div class="bro-name">六娃（蓝）</div>
            </div>
            <div class="bro" data-color="#e84393" data-name="七娃">
                <canvas id="bro7"></canvas>
                <div class="bro-name">七娃（紫）</div>
            </div>
        </div>
        
        <div class="legend">
            <h2>葫芦娃传说</h2>
            <p>葫芦娃是中国经典的民间故事，讲述了七个拥有不同能力的葫芦兄弟与蛇精、蝎子精斗智斗勇的故事。</p>
            <p>每个葫芦娃都有独特的本领：</p>
            <ul style="text-align: left; display: inline-block;">
                <li>大娃 - 力大无穷</li>
                <li>二娃 - 千里眼、顺风耳</li>
                <li>三娃 - 铜头铁臂</li>
                <li>四娃 - 火功</li>
                <li>五娃 - 水功</li>
                <li>六娃 - 隐身</li>
                <li>七娃 - 宝葫芦</li>
            </ul>
        </div>
    </div>
    
    <footer>
        &copy; 2023 葫芦娃兄弟 | 中国传统动画经典
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const bros = document.querySelectorAll('.bro');
            
            bros.forEach((bro, index) => {
                const canvas = bro.querySelector('canvas');
                const ctx = canvas.getContext('2d');
                const color = bro.getAttribute('data-color');
                const name = bro.getAttribute('data-name');
                
                // 设置canvas实际尺寸
                canvas.width = 150;
                canvas.height = 200;
                
                // 绘制葫芦娃
                drawCalabashBro(ctx, color, index + 1);
                
                // 添加点击事件
                bro.addEventListener('click', function() {
                    alert(`你点击了${name}！${getBroAbility(index + 1)}`);
                });
            });
            
            function drawCalabashBro(ctx, color, number) {
                // 绘制背景
                ctx.fillStyle = '#f9f9f9';
                ctx.fillRect(0, 0, 150, 200);
                
                // 绘制葫芦形状
                ctx.fillStyle = color;
                
                // 葫芦下部
                ctx.beginPath();
                ctx.ellipse(75, 140, 40, 50, 0, 0, Math.PI * 2);
                ctx.fill();
                
                // 葫芦上部
                ctx.beginPath();
                ctx.ellipse(75, 70, 30, 40, 0, 0, Math.PI * 2);
                ctx.fill();
                
                // 葫芦连接处
                ctx.fillStyle = '#8b4513';
                ctx.fillRect(70, 100, 10, 20);
                
                // 绘制葫芦叶子
                ctx.fillStyle = '#2ecc71';
                ctx.beginPath();
                ctx.moveTo(75, 30);
                ctx.lineTo(55, 50);
                ctx.lineTo(95, 50);
                ctx.closePath();
                ctx.fill();
                
                // 绘制数字
                ctx.fillStyle = 'white';
                ctx.font = 'bold 24px Arial';
                ctx.textAlign = 'center';
                ctx.fillText(number, 75, 80);
                
                // 绘制脸部
                ctx.fillStyle = '#ffdbac';
                ctx.beginPath();
                ctx.arc(75, 60, 15, 0, Math.PI * 2);
                ctx.fill();
                
                // 绘制眼睛
                ctx.fillStyle = 'black';
                ctx.beginPath();
                ctx.arc(68, 55, 3, 0, Math.PI * 2);
                ctx.fill();
                ctx.beginPath();
                ctx.arc(82, 55, 3, 0, Math.PI * 2);
                ctx.fill();
                
                // 绘制嘴巴
                ctx.beginPath();
                ctx.arc(75, 65, 5, 0, Math.PI);
                ctx.stroke();
            }
            
            function getBroAbility(number) {
                const abilities = [
                    "力大无穷，可以变大变小！",
                    "千里眼、顺风耳，聪明机灵！",
                    "铜头铁臂，刀枪不入！",
                    "火功，能吞吐烈火！",
                    "水功，能吞吐江河之水！",
                    "隐身术，来无影去无踪！",
                    "有宝葫芦，可以吸入妖怪！"
                ];
                return abilities[number - 1];
            }
        });
    </script>
</body>
</html>

页面功能说明

  1. HTML结构：

    • 创建了一个完整的葫芦娃主题页面
    • 包含7个葫芦娃的展示区域
    • 添加了葫芦娃的传说介绍

  2. CSS样式：

    • 使用了中国传统色彩风格
    • 响应式布局，适应不同屏幕尺寸
    • 添加了悬停效果增强交互体验

  3. Canvas绘图：

    • 使用JavaScript动态绘制每个葫芦娃的形象
    • 每个葫芦娃有不同的颜色和编号
    • 绘制了葫芦形状、脸部特征等细节

  4. 交互功能：

    • 点击每个葫芦娃会显示其特殊能力
    • 悬停时有放大效果

你可以将这段代码复制到HTML文件中，在浏览器中打开即可看到完整的葫芦娃页面效果。

# 葫芦娃 HTML/CSS/Canvas 页面 以下是一个使用HTML、CSS和Canvas创建的葫芦娃主题页面代码： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>葫芦娃兄弟</title> <style> body { font-family: 'Microsoft YaHei', sans-serif; background-color: #f5e6c8; margin: 0; padding: 0; text-align: center; color: #8b4513; } header { background-color: #e74c3c; color: white; padding: 20px 0; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } h1 { margin: 0; font-size: 2.5em; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } .container { max-width: 1000px; margin: 20px auto; padding: 20px; } .calabash-bros { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 30px; } .bro { width: 150px; height: 200px; position: relative; cursor: pointer; transition: transform 0.3s; } .bro:hover { transform: scale(1.1); } .bro canvas { width: 100%; height: 100%; } .bro-name { margin-top: 10px; font-weight: bold; font-size: 1.2em; } .legend { margin-top: 40px; padding: 20px; background-color: rgba(255, 255, 255, 0.7); border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } footer { margin-top: 40px; padding: 20px; background-color: #e74c3c; color: white; } </style> </head> <body> <header> <h1>葫芦娃兄弟</h1> </header> <div class="container"> <div class="calabash-bros"> <div class="bro" data-color="#e74c3c" data-name="大娃"> <canvas id="bro1"></canvas> <div class="bro-name">大娃（红）</div> </div> <div class="bro" data-color="#f39c12" data-name="二娃"> <canvas id="bro2"></canvas> <div class="bro-name">二娃（橙）</div> </div> <div class="bro" data-color="#f1c40f" data-name="三娃"> <canvas id="bro3"></canvas> <div class="bro-name">三娃（黄）</div> </div> <div class="bro" data-color="#2ecc71" data-name="四娃"> <canvas id="bro4"></canvas> <div class="bro-name">四娃（绿）</div> </div> <div class="bro" data-color="#3498db" data-name="五娃"> <canvas id="bro5"></canvas> <div class="bro-name">五娃（青）</div> </div> <div class="bro" data-color="#9b59b6" data-name="六娃"> <canvas id="bro6"></canvas> <div class="bro-name">六娃（蓝）</div> </div> <div class="bro" data-color="#e84393" data-name="七娃"> <canvas id="bro7"></canvas> <div class="bro-name">七娃（紫）</div> </div> </div> <div class="legend"> <h2>葫芦娃传说</h2> <p>葫芦娃是中国经典的民间故事，讲述了七个拥有不同能力的葫芦兄弟与蛇精、蝎子精斗智斗勇的故事。</p> <p>每个葫芦娃都有独特的本领：</p> <ul style="text-align: left; display: inline-block;"> <li>大娃 - 力大无穷</li> <li>二娃 - 千里眼、顺风耳</li> <li>三娃 - 铜头铁臂</li> <li>四娃 - 火功</li> <li>五娃 - 水功</li> <li>六娃 - 隐身</li> <li>七娃 - 宝葫芦</li> </ul> </div> </div> <footer> &copy; 2023 葫芦娃兄弟 | 中国传统动画经典 </footer> <script> document.addEventListener('DOMContentLoaded', function() { const bros = document.querySelectorAll('.bro'); bros.forEach((bro, index) => { const canvas = bro.querySelector('canvas'); const ctx = canvas.getContext('2d'); const color = bro.getAttribute('data-color'); const name = bro.getAttribute('data-name'); // 设置canvas实际尺寸 canvas.width = 150; canvas.height = 200; // 绘制葫芦娃 drawCalabashBro(ctx, color, index + 1); // 添加点击事件 bro.addEventListener('click', function() { alert(`你点击了${name}！${getBroAbility(index + 1)}`); }); }); function drawCalabashBro(ctx, color, number) { // 绘制背景 ctx.fillStyle = '#f9f9f9'; ctx.fillRect(0, 0, 150, 200); // 绘制葫芦形状 ctx.fillStyle = color; // 葫芦下部 ctx.beginPath(); ctx.ellipse(75, 140, 40, 50, 0, 0, Math.PI * 2); ctx.fill(); // 葫芦上部 ctx.beginPath(); ctx.ellipse(75, 70, 30, 40, 0, 0, Math.PI * 2); ctx.fill(); // 葫芦连接处 ctx.fillStyle = '#8b4513'; ctx.fillRect(70, 100, 10, 20); // 绘制葫芦叶子 ctx.fillStyle = '#2ecc71'; ctx.beginPath(); ctx.moveTo(75, 30); ctx.lineTo(55, 50); ctx.lineTo(95, 50); ctx.closePath(); ctx.fill(); // 绘制数字 ctx.fillStyle = 'white'; ctx.font = 'bold 24px Arial'; ctx.textAlign = 'center'; ctx.fillText(number, 75, 80); // 绘制脸部 ctx.fillStyle = '#ffdbac'; ctx.beginPath(); ctx.arc(75, 60, 15, 0, Math.PI * 2); ctx.fill(); // 绘制眼睛 ctx.fillStyle = 'black'; ctx.beginPath(); ctx.arc(68, 55, 3, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(82, 55, 3, 0, Math.PI * 2); ctx.fill(); // 绘制嘴巴 ctx.beginPath(); ctx.arc(75, 65, 5, 0, Math.PI); ctx.stroke(); } function getBroAbility(number) { const abilities = [ "力大无穷，可以变大变小！", "千里眼、顺风耳，聪明机灵！", "铜头铁臂，刀枪不入！", "火功，能吞吐烈火！", "水功，能吞吐江河之水！", "隐身术，来无影去无踪！", "有宝葫芦，可以吸入妖怪！" ]; return abilities[number - 1]; } }); </script> </body> </html> ``` ## 页面功能说明 1. **HTML结构**： - 创建了一个完整的葫芦娃主题页面 - 包含7个葫芦娃的展示区域 - 添加了葫芦娃的传说介绍 2. **CSS样式**： - 使用了中国传统色彩风格 - 响应式布局，适应不同屏幕尺寸 - 添加了悬停效果增强交互体验 3. **Canvas绘图**： - 使用JavaScript动态绘制每个葫芦娃的形象 - 每个葫芦娃有不同的颜色和编号 - 绘制了葫芦形状、脸部特征等细节 4. **交互功能**： - 点击每个葫芦娃会显示其特殊能力 - 悬停时有放大效果 你可以将这段代码复制到HTML文件中，在浏览器中打开即可看到完整的葫芦娃页面效果。
abearxiong commented 2025-07-23 22:18:40 +08:00
Author
Owner
Copy Link
<html lang="zh-CN"> <head>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>葫芦娃 - 经典动画角色</title> <style> body { margin: 0; padding: 0; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); font-family: 'Microsoft YaHei', Arial, sans-serif; display: flex; flex-direction: column; align-items: center; min-height: 100vh; } .header { text-align: center; padding: 20px; color: white; } .header h1 { margin: 0; font-size: 2.5em; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } .header p { font-size: 1.2em; margin-top: 10px; opacity: 0.9; } .container { display: flex; gap: 30px; align-items: flex-start; padding: 20px; flex-wrap: wrap; justify-content: center; } .canvas-container { background: rgba(255, 255, 255, 0.1); border-radius: 15px; padding: 20px; backdrop-filter: blur(10px); box-shadow: 0 8px 32px rgba(0,0,0,0.3); } canvas { background: white; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.2); } .info { background: rgba(255, 255, 255, 0.95); border-radius: 15px; padding: 25px; max-width: 400px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); } .info h2 { color: #333; margin-top: 0; border-bottom: 2px solid #667eea; padding-bottom: 10px; } .info ul { padding-left: 20px; } .info li { margin: 10px 0; line-height: 1.6; } .葫芦娃特点 { background: #e3f2fd; padding: 15px; border-radius: 8px; margin: 15px 0; } .footer { color: white; text-align: center; padding: 20px; margin-top: auto; opacity: 0.8; } @media (max-width: 768px) { .container { flex-direction: column; align-items: center; } .info { max-width: 90%; } } </style> </head> <body> <div class="header"> <h1>葫芦娃</h1> <p>经典国产动画《葫芦兄弟》中的英雄角色</p> </div> <div class="container"> <div class="canvas-container"> <canvas id="huluwaCanvas" width="300" height="400"></canvas> </div> <div class="info"> <h2>关于葫芦娃</h2> <div class="葫芦娃特点"> <strong>葫芦娃特点：</strong> <ul> <li>身穿红色背心和蓝色短裤</li> <li>头顶葫芦叶造型的头发</li> <li>光脚丫，动作敏捷</li> <li>各个葫芦娃有不同的超能力</li> </ul> </div> <h3>七个葫芦娃</h3> <ul> <li>🔴 大娃：力大无穷</li> <li>🟠 二娃：千里眼顺风耳</li> <li>🟡 三娃：铜头铁臂</li> <li>🟢 四娃：喷火</li> <li>🔵 五娃：喷水</li> <li>🟣 六娃：隐身</li> <li>🌈 七娃：宝葫芦</li> </ul> <p>葫芦娃是中国经典动画片《葫芦兄弟》的主角，讲述了七个葫芦娃与妖精斗智斗勇的故事。</p> </div> </div> <div class="footer"> <p>致敬经典国产动画 | 葫芦兄弟</p> </div> <script> function drawHuluwa() { const canvas = document.getElementById('huluwaCanvas'); const ctx = canvas.getContext('2d'); // 清空画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 绘制头部 ctx.beginPath(); ctx.arc(150, 100, 40, 0, Math.PI * 2); ctx.fillStyle = '#FFD700'; ctx.fill(); ctx.strokeStyle = '#FFA500'; ctx.lineWidth = 2; ctx.stroke(); // 绘制葫芦叶发型 ctx.beginPath(); ctx.ellipse(130, 85, 15, 25, Math.PI/4, 0, Math.PI * 2); ctx.fillStyle = '#228B22'; ctx.fill(); ctx.beginPath(); ctx.ellipse(170, 85, 15, 25, -Math.PI/4, 0, Math.PI * 2); ctx.fillStyle = '#32CD32'; ctx.fill(); // 绘制眼睛 ctx.beginPath(); ctx.arc(135, 95, 8, 0, Math.PI * 2); ctx.arc(165, 95, 8, 0, Math.PI * 2); ctx.fillStyle = 'white'; ctx.fill(); ctx.beginPath(); ctx.arc(135, 95, 4, 0, Math.PI * 2); ctx.arc(165, 95, 4, 0, Math.PI * 2); ctx.fillStyle = 'black'; ctx.fill(); // 绘制嘴巴 ctx.beginPath(); ctx.arc(150, 115, 15, 0, Math.PI); ctx.strokeStyle = '#8B4513'; ctx.lineWidth = 2; ctx.stroke(); // 绘制身体 ctx.beginPath(); ctx.rect(120, 140, 60, 80); ctx.fillStyle = '#FF6B6B'; ctx.fill(); ctx.strokeStyle = '#CC5555'; ctx.lineWidth = 2; ctx.stroke(); // 绘制葫芦图案 ctx.beginPath(); ctx.ellipse(150, 180, 15, 20, 0, 0, Math.PI * 2); ctx.fillStyle = '#90EE90'; ctx.fill(); ctx.strokeStyle = '#228B22'; ctx.lineWidth = 1; ctx.stroke(); // 绘制手臂 ctx.beginPath(); ctx.ellipse(100, 160, 15, 25, Math.PI/2, 0, Math.PI * 2); ctx.ellipse(200, 160, 15, 25, Math.PI/2, 0, Math.PI * 2); ctx.fillStyle = '#FFD700'; ctx.fill(); // 绘制腿部 ctx.beginPath(); ctx.ellipse(130, 240, 12, 30, 0, 0, Math.PI * 2); ctx.ellipse(170, 240, 12, 30, 0, 0, Math.PI * 2); ctx.fillStyle = '#FFD700'; ctx.fill(); // 绘制脚部 ctx.beginPath(); ctx.ellipse(125, 270, 15, 8, 0, 0, Math.PI * 2); ctx.ellipse(175, 270, 15, 8, 0, 0, Math.PI * 2); ctx.fillStyle = '#FFD700'; ctx.fill(); // 绘制短裤 ctx.beginPath(); ctx.rect(125, 210, 50, 25); ctx.fillStyle = '#4169E1'; ctx.fill(); ctx.strokeStyle = '#191970'; ctx.lineWidth = 2; ctx.stroke(); // 添加装饰线条 ctx.beginPath(); ctx.moveTo(125, 222); ctx.lineTo(175, 222); ctx.strokeStyle = '#FFD700'; ctx.lineWidth = 2; ctx.stroke(); } // 页面加载完成后绘制葫芦娃 window.addEventListener('load', drawHuluwa); // 窗口大小改变时重新绘制 window.addEventListener('resize', drawHuluwa); </script> </body> </html>
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
apps
apps的模块
feature
p0
p1
p2
think
笔记
No Label
Milestone
No items
No Milestone pointless-01
Projects
Clear projects
No project
Assignees
Clear assignees
abearxiong
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: kevisual/pointless#1
No description provided.
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?