南无月 发表于 2024-5-3 12:32

本帖最后由 南无月 于 2024-5-3 12:33 编辑 <br /><br /><style>
#papa {
        margin: 10px 0 10px calc(50% - 931px);
        width: 1700px;
        height: 900px;
        background: url('https://642303.freep.cn/642303/za/222.webp') no-repeat center/cover;
        box-shadow: 3px 3px 20px #000;
        overflow: hidden;
        display: grid;
        place-items: center;
        position: relative;
        overflow: hidden;
        z-index: 1;
}

#mypic {
        position: absolute;
        width: 100px;
        height: 30px;
        right:800px;
        bottom:430px;
        mix-blend-mode: hard-light;
        cursor: pointer;
        transition: filter 1s;
        animation: rot 6s infinite linear var(--state);
        z-index: 10;
}
#mypic:hover {
        filter: invert(100%) drop-shadow(4px 4px 20px snow);
}
#canv { display: block;position: relative; margin: 20px auto; border: px solid gray; }
li-zi {
        position: absolute;
        width: 50px;
        height: 1px;
        background: linear-gradient(to right,snow,green);
        animation: moving var(--du) var(--de) infinite linear var(--state);
}
@keyframes moving {
        from { transform: translate(0,0) rotate(var(--deg)); opacity: 0; }
        to { transform: translate(var(--xx),var(--yy)) rotate(var(--deg)); opacity: 1; }
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
       
        <img id="mypic" src="https://642303.freep.cn/642303/za/916549ed80630e70.png" alt="" title="暂停/播放" />
<canvas id="canv" width="400" height="400"></canvas>
        <audio id="aud" src="" autoplay loop></audio>
</div>

<script>

let cTimer = null;

var ctx = canv.getContext('2d');
var size = canv.width / 2, r1 = size - 10, r2 = r1 * 2/5, points = [];

for(var i = 0; i < 5; i ++) {
    var x1 = Math.cos((18 + i * 72) / 180 * Math.PI) * r1 + size,
      y1 = -Math.sin((18 + i * 72) / 180 * Math.PI) * r1 + size,
      x2 = Math.cos((54 + i * 72) / 180 * Math.PI) * r2 + size,
      y2 = -Math.sin((54 + i * 72) / 180 * Math.PI) * r2 + size;
    points.push({x1: x1, y1: y1, x2: x2, y2: y2});
}

var drawTriangle = () => {
    for(var j = 0; j < 5; j++) {
      ctx.beginPath();
      ctx.moveTo(points.x1, points.y1);
      ctx.lineTo(size, size);
      ctx.lineTo(points.x2, points.y2);
      ctx.lineTo(points.x1, points.y1);
      ctx.fill();
    }
};

var draw5star = () => {
    ctx.fillStyle = 'red';
    drawTriangle();
    ctx.save();
    ctx.fillStyle = 'darkred';
    ctx.translate(size, size);
    ctx.scale(-1, 1);
    ctx.translate(-size, -size);
    drawTriangle();
    ctx.restore();
};

draw5star();
      
aud.src = 'https://music.163.com/song/media/outer/url?id=862921811';
aud.loop = true;
aud.autoplay = true;
let total = 160;
Array.from({length: total}).forEach((lz,key) => {
        lz = document.createElement('li-zi');
        let hudu = Math.PI / 180 * 360 / total * key;
        let xx = 800 * Math.cos(hudu), yy = 800 * Math.sin(hudu);
        lz.style.cssText += `
                --xx: ${xx}px;
                --yy: ${yy}px;
                --deg: ${360 / total * key}deg;
                --du: ${2 + Math.random() * 2}s;
                --de: -${Math.random() * 3}s;
        `;
        papa.prepend(lz);
});

/* let mState = () => {mypic.style.setProperty('--state', aud.paused ? 'paused' : 'running');draw();}; */

let mState = () => {
        aud.paused
                ? (papa.style.setProperty('--state','paused'), vid.pause())
                : (papa.style.setProperty('--state','running'),vid.play());
        draw();
};

aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
mypic.onclick = () => aud.paused ? aud.play() : aud.pause();

function draw() {
      ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
      ctx.fillRect(0, 0, w, h);
      ctx.fillStyle = '#FFD700';
      ctx.font = fontsize + 'px arial';
         for(var j = 0; j < drops.length; j ++){
                let text = texts;
                ctx.fillText(text, j * fontsize + fontsize / 2 + 1, drops * fontsize);
                if(drops*fontsize > h || Math.random() > 0.95){
                        drops = 0;
                }
                drops++;
      }
      cTimer = aud.paused ? cancelAnimationFrame(cTimer) : requestAnimationFrame(draw);
};
/* setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100); */
</script>

红影 发表于 2024-5-3 14:21

马黑黑 发表于 2024-5-3 10:17
画的流程也是先画每个角柱的左半部，着色，再画右半部，着色

是的，流程一样，处理技巧不同，你这个更简洁{:4_187:}

红影 发表于 2024-5-3 14:23

马黑黑 发表于 2024-5-3 10:19
这些就是简单的算法

嗯，用了代数更简单了。
页: 1 [2]
查看完整版本: 在canvas画布中绘制立体正五角星