当前位置：首页 > JavaScript

js实现logo

2026-03-14 10:05:22JavaScript

使用HTML5 Canvas绘制Logo

在JavaScript中，可以使用HTML5 Canvas来绘制自定义Logo。以下是一个简单的例子，绘制一个圆形Logo：

const canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 200;
document.body.appendChild(canvas);

const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(100, 100, 80, 0, Math.PI * 2);
ctx.fillStyle = '#4285F4';
ctx.fill();

使用SVG创建矢量Logo

SVG是创建Logo的理想选择，因为它可以无限缩放而不失真：

js实现logo

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

const circle = document.createElementNS(svgNS, "circle");
circle.setAttribute("cx", "100");
circle.setAttribute("cy", "100");
circle.setAttribute("r", "80");
circle.setAttribute("fill", "#EA4335");
svg.appendChild(circle);

使用CSS创建简单Logo

对于简单的Logo效果，可以直接用CSS实现：

js实现logo

const logo = document.createElement('div');
logo.style.width = '200px';
logo.style.height = '200px';
logo.style.borderRadius = '50%';
logo.style.backgroundColor = '#34A853';
logo.style.margin = '20px';
document.body.appendChild(logo);

使用第三方库绘制复杂Logo

对于更复杂的Logo设计，可以考虑使用第三方库如Paper.js或Two.js：

// 使用Two.js示例
const two = new Two({
  width: 200,
  height: 200
}).appendTo(document.body);

const circle = two.makeCircle(100, 100, 80);
circle.fill = '#FBBC05';
circle.stroke = '#24292E';
two.update();

响应式Logo实现

为了使Logo适应不同屏幕尺寸，可以添加响应式处理：

function createResponsiveLogo() {
  const size = Math.min(window.innerWidth, window.innerHeight) * 0.5;
  const logo = document.getElementById('logo');
  logo.style.width = `${size}px`;
  logo.style.height = `${size}px`;
}

window.addEventListener('resize', createResponsiveLogo);
createResponsiveLogo();