用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>注意事项
- 精确还原需要参考官方设计图纸的路径数据
- 彩色渐变部分建议使用HSL颜色空间实现平滑过渡
- 三维效果可通过添加阴影和光照渐变增强
- 动画效果可使用CSS关键帧或requestAnimationFrame实现
以上代码提供了不同精度的实现方案，可根据需求选择合适的方式。完整实现建议结合矢量图形工具导出的精确路径数据。
