当前位置：首页 > JavaScript

Js实现冰墩墩

2026-04-04 20:47:30JavaScript

以下是使用JavaScript绘制冰墩墩的几种实现方式，结合Canvas绘图和CSS动画技术：

基础Canvas绘制

使用Canvas API绘制冰墩墩的轮廓和细节：

const canvas = document.getElementById('iceDunDun');
const ctx = canvas.getContext('2d');

// 绘制主体
ctx.beginPath();
ctx.arc(150, 150, 100, 0, Math.PI * 2);
ctx.fillStyle = 'white';
ctx.fill();

// 绘制黑色眼眶
ctx.beginPath();
ctx.arc(120, 130, 20, 0, Math.PI * 2);
ctx.arc(180, 130, 20, 0, Math.PI * 2);
ctx.fillStyle = 'black';
ctx.fill();

// 绘制彩虹色外壳
const gradient = ctx.createLinearGradient(100, 100, 200, 200);
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.2, 'orange');
gradient.addColorStop(0.4, 'yellow');
gradient.addColorStop(0.6, 'green');
gradient.addColorStop(0.8, 'blue');
gradient.addColorStop(1, 'purple');

ctx.beginPath();
ctx.arc(150, 150, 110, 0, Math.PI * 2);
ctx.strokeStyle = gradient;
ctx.lineWidth = 10;
ctx.stroke();

SVG实现方案

通过SVG路径数据实现矢量图形：

<svg width="300" height="300">
  <circle cx="150" cy="150" r="100" fill="white" stroke="black" stroke-width="2"/>
  <circle cx="120" cy="130" r="20" fill="black"/>
  <circle cx="180" cy="130" r="20" fill="black"/>
  <path d="M100 150 Q150 180 200 150" stroke="black" fill="transparent"/>
</svg>

CSS动画版本

添加冰晶效果的CSS动画：

.ice-shell {
  width: 200px;
  height: 200px;
  background: white;
  border-radius: 50%;
  position: relative;
  animation: sparkle 2s infinite;
}

@keyframes sparkle {
  0% { box-shadow: 0 0 10px rgba(255,255,255,0.8); }
  50% { box-shadow: 0 0 20px rgba(173,216,230,0.9); }
  100% { box-shadow: 0 0 10px rgba(255,255,255,0.8); }
}

Three.js 3D版本

使用WebGL创建三维模型：

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

const geometry = new THREE.SphereGeometry(1, 32, 32);
const material = new THREE.MeshPhongMaterial({ color: 0xffffff });
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

// 添加冰晶材质效果
material.envMap = new THREE.TextureLoader().load('ice_texture.jpg');
material.refractionRatio = 0.95;

实现时需注意：