当前位置：首页 > JavaScript

用JS实现冰墩墩

2026-01-31 09:16:43JavaScript

用JS实现冰墩墩

以下是用JavaScript绘制冰墩墩的几种实现方法，结合Canvas绘图和SVG路径数据：

使用Canvas绘制基础轮廓

const canvas = document.createElement('canvas');
canvas.width = 400;
canvas.height = 400;
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');

// 绘制头部轮廓
ctx.beginPath();
ctx.arc(200, 150, 100, 0, Math.PI * 2);
ctx.fillStyle = '#ffffff';
ctx.fill();
ctx.strokeStyle = '#000000';
ctx.lineWidth = 2;
ctx.stroke();

// 绘制黑色眼圈
ctx.beginPath();
ctx.ellipse(160, 130, 30, 40, 0, 0, Math.PI * 2);
ctx.ellipse(240, 130, 30, 40, 0, 0, Math.PI * 2);
ctx.fillStyle = '#000000';
ctx.fill();

// 绘制彩色光环
const gradient = ctx.createLinearGradient(100, 50, 300, 50);
gradient.addColorStop(0, '#ff3366');
gradient.addColorStop(0.5, '#33ccff');
gradient.addColorStop(1, '#ffcc33');
ctx.beginPath();
ctx.arc(200, 150, 110, 0, Math.PI * 2);
ctx.lineWidth = 8;
ctx.strokeStyle = gradient;
ctx.stroke();

使用SVG路径数据精确绘制

const svgNS = "http://www.w3.org/2000/svg";
const svg = document.createElementNS(svgNS, "svg");
svg.setAttribute("width", "400");
svg.setAttribute("height", "400");
document.body.appendChild(svg);

// 身体轮廓路径
const bodyPath = document.createElementNS(svgNS, "path");
bodyPath.setAttribute("d", "M200,250 C280,250 320,200 320,150 C320,80 260,50 200,50 C140,50 80,80 80,150 C80,200 120,250 200,250");
bodyPath.setAttribute("fill", "white");
bodyPath.setAttribute("stroke", "black");
svg.appendChild(bodyPath);

// 添加奥运五环
const colors = ['#0085C7', '#000000', '#F4C300', '#009F3D', '#DF0024'];
for (let i = 0; i < 5; i++) {
    const ring = document.createElementNS(svgNS, "circle");
    ring.setAttribute("cx", 150 + i * 25);
    ring.setAttribute("cy", 180);
    ring.setAttribute("r", 10);
    ring.setAttribute("fill", "none");
    ring.setAttribute("stroke", colors[i]);
    ring.setAttribute("stroke-width", "2");
    svg.appendChild(ring);
}

使用CSS绘制简化版

<style>
.bing-dwen-dwen {
    position: relative;
    width: 200px;
    height: 250px;
    background: white;
    border-radius: 50%;
    border: 2px solid black;
}
.eyes {
    position: absolute;
    width: 60px;
    height: 80px;
    background: black;
    border-radius: 50%;
}
.left-eye { top: 30%; left: 20%; }
.right-eye { top: 30%; right: 20%; }
.rainbow {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 8px solid transparent;
    border-image: linear-gradient(to right, red, orange, yellow, green, blue);
    border-image-slice: 1;
    top: -10px;
    left: -10px;
}
</style>

<div class="bing-dwen-dwen">
    <div class="rainbow"></div>
    <div class="eyes left-eye"></div>
    <div class="eyes right-eye"></div>
</div>