js实现筛子

实现筛子动画的JavaScript方法

使用HTML5 Canvas和JavaScript创建一个简单的筛子（骰子）动画效果：

const canvas = document.getElementById('diceCanvas');
const ctx = canvas.getContext('2d');
const diceSize = 100;
let currentValue = 1;

function drawDice(value) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = 'white';
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;

    // 绘制骰子外框
    ctx.beginPath();
    ctx.roundRect(50, 50, diceSize, diceSize, 10);
    ctx.fill();
    ctx.stroke();

    // 绘制点数
    ctx.fillStyle = 'black';
    const dotPositions = {
        1: [[100, 100]],
        2: [[75, 75], [125, 125]],
        3: [[75, 75], [100, 100], [125, 125]],
        4: [[75, 75], [75, 125], [125, 75], [125, 125]],
        5: [[75, 75], [75, 125], [100, 100], [125, 75], [125, 125]],
        6: [[75, 75], [75, 125], [100, 75], [100, 125], [125, 75], [125, 125]]
    };

    dotPositions[value].forEach(pos => {
        ctx.beginPath();
        ctx.arc(pos[0], pos[1], 8, 0, Math.PI * 2);
        ctx.fill();
    });
}

function rollDice() {
    let rolls = 0;
    const maxRolls = 10;
    const rollInterval = setInterval(() => {
        currentValue = Math.floor(Math.random() * 6) + 1;
        drawDice(currentValue);
        rolls++;
        if (rolls >= maxRolls) {
            clearInterval(rollInterval);
        }
    }, 100);
}

// 初始绘制
drawDice(currentValue);

HTML结构

对应的HTML结构需要包含Canvas元素和触发按钮：

<canvas id="diceCanvas" width="200" height="200"></canvas>
<button onclick="rollDice()">掷骰子</button>

CSS样式

添加基础样式使骰子显示更美观：

#diceCanvas {
    border: 1px solid #ccc;
    display: block;
    margin: 20px auto;
    background-color: #f5f5f5;
}

button {
    display: block;
    margin: 0 auto;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

实现3D骰子效果

如需更真实的3D效果，可以使用CSS 3D变换：

const dice = document.getElementById('3dDice');
const values = ['one', 'two', 'three', 'four', 'five', 'six'];

function roll3DDice() {
    dice.className = 'dice';
    setTimeout(() => {
        const randomValue = Math.floor(Math.random() * 6);
        dice.className = `dice show-${values[randomValue]}`;
    }, 100);
}

对应HTML和CSS：

<div class="dice-container">
    <div id="3dDice" class="dice show-one">
        <div class="face one">1</div>
        <div class="face two">2</div>
        <div class="face three">3</div>
        <div class="face four">4</div>
        <div class="face five">5</div>
        <div class="face six">6</div>
    </div>
</div>
<button onclick="roll3DDice()">掷3D骰子</button>

.dice-container {
    perspective: 1000px;
    margin: 50px auto;
    width: 100px;
    height: 100px;
}

.dice {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s;
}

.face {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid #333;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: white;
}

/* 各面初始位置 */
.one { transform: rotateY(0deg) translateZ(50px); }
.two { transform: rotateY(90deg) translateZ(50px); }
.three { transform: rotateY(180deg) translateZ(50px); }
.four { transform: rotateY(-90deg) translateZ(50px); }
.five { transform: rotateX(90deg) translateZ(50px); }
.six { transform: rotateX(-90deg) translateZ(50px); }

/* 显示不同面时的变换 */
.show-one { transform: rotateY(0deg); }
.show-two { transform: rotateY(-90deg); }
.show-three { transform: rotateY(-180deg); }
.show-four { transform: rotateY(90deg); }
.show-five { transform: rotateX(-90deg); }
.show-six { transform: rotateX(90deg); }