当前位置：首页 > JavaScript

js实现宝剑

2026-01-31 21:54:59JavaScript

JavaScript 实现宝剑效果

在JavaScript中实现宝剑效果通常涉及动画、图形渲染或CSS变换。以下是几种常见方法：

使用Canvas绘制宝剑

通过HTML5 Canvas绘制宝剑形状并添加动画效果：

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

function drawSword() {
    // 剑柄
    ctx.fillStyle = '#654321';
    ctx.fillRect(95, 50, 10, 100);

    // 护手
    ctx.fillStyle = '#999';
    ctx.fillRect(85, 140, 30, 10);

    // 剑身
    ctx.fillStyle = '#ccc';
    ctx.beginPath();
    ctx.moveTo(100, 40);
    ctx.lineTo(105, 150);
    ctx.lineTo(95, 150);
    ctx.closePath();
    ctx.fill();

    // 剑光效果
    const gradient = ctx.createLinearGradient(100, 40, 100, 150);
    gradient.addColorStop(0, 'rgba(255,255,255,0.8)');
    gradient.addColorStop(1, 'transparent');
    ctx.fillStyle = gradient;
    ctx.fill();
}

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawSword();
    requestAnimationFrame(animate);
}

animate();

CSS动画实现宝剑效果

通过CSS变换和动画创建宝剑挥舞效果：

<div class="sword"></div>

<style>
.sword {
    position: relative;
    width: 5px;
    height: 150px;
    background: linear-gradient(to bottom, #ccc, #999);
    margin: 100px auto;
}

.sword::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: -10px;
    width: 25px;
    height: 10px;
    background: #654321;
}

.sword::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: -2px;
    width: 9px;
    height: 30px;
    background: #543210;
}

@keyframes swing {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(45deg); }
    100% { transform: rotate(0deg); }
}

.swing-effect {
    animation: swing 0.5s ease-in-out;
}
</style>

<script>
const sword = document.querySelector('.sword');
sword.addEventListener('click', () => {
    sword.classList.add('swing-effect');
    setTimeout(() => sword.classList.remove('swing-effect'), 500);
});
</script>

使用Three.js创建3D宝剑

对于更高级的3D效果，可以使用Three.js库：

import * as THREE from 'three';

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

// 创建剑身
const bladeGeometry = new THREE.BoxGeometry(0.2, 1, 0.05);
const bladeMaterial = new THREE.MeshPhongMaterial({color: 0xcccccc});
const blade = new THREE.Mesh(bladeGeometry, bladeMaterial);
blade.position.y = 0.5;

// 创建剑柄
const hiltGeometry = new THREE.CylinderGeometry(0.05, 0.05, 0.3, 6);
const hiltMaterial = new THREE.MeshPhongMaterial({color: 0x654321});
const hilt = new THREE.Mesh(hiltGeometry, hiltMaterial);
hilt.position.y = -0.15;

// 组合宝剑
const sword = new THREE.Group();
sword.add(blade);
sword.add(hilt);
scene.add(sword);

// 添加光源
const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(0, 0, 5);
scene.add(light);

camera.position.z = 3;

function animate() {
    requestAnimationFrame(animate);
    sword.rotation.y += 0.01;
    renderer.render(scene, camera);
}

animate();

SVG实现宝剑

使用SVG结合JavaScript创建可交互的宝剑：

js实现宝剑

<svg width="200" height="200" id="swordSvg">
    <path id="blade" d="M100,20 L105,150 L95,150 Z" fill="#ccc" />
    <rect id="hilt" x="95" y="150" width="10" height="30" fill="#654321" />
    <rect id="guard" x="85" y="140" width="30" height="10" fill="#999" />
</svg>

<script>
const sword = document.getElementById('swordSvg');
let angle = 0;

function swing() {
    angle = (angle + 5) % 360;
    sword.style.transform = `rotate(${angle}deg)`;
    if (angle < 90) requestAnimationFrame(swing);
}

sword.addEventListener('click', () => {
    angle = 0;
    swing();
});
</script>

以上方法可根据项目需求选择，Canvas适合游戏开发，CSS适合简单动画，Three.js适合3D效果，SVG适合矢量图形场景。