如何使用画布和 JavaScript 使雪花形状旋转到其中心？

如何解决如何使用画布和 JavaScript 使雪花形状旋转到其中心？

我正在尝试创建一个脚本，该脚本使用雪花形状来模拟下雪，该形状在下落时以中心旋转。

问题在于尝试 ctx.rotate() 会旋转画布中心的所有雪花，而不是将每个单独的雪花旋转到其中心。代码。

    (function() {
        window.requestAnimationFrame = requestAnimationFrame;
    })();
    var flakes = [],c = document.getElementById('canvas'),ctx = c.getContext("2d"),flakeCount = 100
    c.width = window.innerWidth;
    c.height = window.innerHeight;
    init();

    function init() {
        for (var i = 0; i < flakeCount; i++) {
            var x = Math.floor(Math.random() * canvas.width),y = Math.floor(Math.random() * canvas.height),speed = (Math.random() * 1) + 0.5
            img = draw();
            flakes.push({
                img: img,velY: speed,velX: 0,x: x,y: y,color: getRandomColor()
            });
        }
        snow();
    }
    function snow() {
        ctx.clearRect(0,canvas.width,canvas.height);
        for (var i = 0; i < flakeCount; i++) {
            var flake = flakes[i]
            flake.y += flake.velY;
            flake.x += flake.velX+getRand(0.1,0.3);
            if (flake.y >= canvas.height || flake.y <= 0) {
                reset(flake);
            }
            if (flake.x >= canvas.width || flake.x <= 0) {
                reset(flake);
            }
            ctx.filter = flake.color;
            ctx.drawImage(flake.img,flake.x,flake.y)
        }
        requestAnimationFrame(snow);
    };
    function reset(flake) {
        flake.x = Math.floor(Math.random() * canvas.width);
        flake.y = 0;
        flake.speed = (Math.random() * 1) + 0.5;
        flake.velY = flake.speed;
        flake.velX = 0;
        flake.color = getRandomColor()
    }
    function draw() {
        let c = document.createElement('canvas');
        var canvas = c;
        c.width = window.innerWidth;
        c.height = window.innerHeight;
        if (canvas.getContext) {
            var context = canvas.getContext('2d');
            var width = canvas.width;
            var height = canvas.height;
            context.lineWidth = 20;
            context.lineCap = 'round';
            context.fillStyle = "rgba(255,255,0.0)";
            context.strokeStyle = "#FFFFFF";
            context.fillRect(0,width,height);
            context.scale(0.1,0.1)
            context.translate(width/2,height/2);
            for(var count = 0; count < 6; count++) {
                context.save();     
                drawSegment(context,100,40);
                drawSegment(context,80);
                drawSegment(context,0);
                context.restore();          
                context.rotate(Math.PI/3);
            }
        }
        return canvas;
    }
    function drawSegment(context,segmentLength,branchLength) {
        context.beginPath();
        context.moveTo(0,0);
        context.lineTo(segmentLength,0);
        context.stroke();
        context.translate(segmentLength,0);
        if (branchLength > 0) {
            drawBranch(context,branchLength,1);
            drawBranch(context,-1);
        }
    }
    function drawBranch(context,direction) {
        context.save();
        context.rotate(direction*Math.PI/3);
        context.moveTo(0,0);
        context.lineTo(branchLength,0);
        context.stroke();
        context.restore();
    }

在下面的JSFiddle中你可以找到代码 https://jsfiddle.net/hkz3nyfL/7/

（你会注意到顶部的形状看起来是破碎的，我不知道为什么会这样，这是因为屏幕太小了）

提前致谢

解决方法

运行给定代码时，我的浏览器 (Edge) 偶尔会抱怨违规 - requestAnimationFrames 之间似乎需要太多的 JS 运行时 - 我认为这意味着它无法跟上正常的 60fps。

GPU 使用率介于 98% 和 100% 之间。问题是在 100 个画布上完成了太多工作，将它们绘制到每个帧的主画布上。

改用 img 元素而不是每个雪花的画布，但仍使用问题中给出的画布技术绘制它们，并使用 CSS 动画为每个雪花制作动画，没有标记违规，GPU 使用率约为 30%。>

注意：还有一个问题是给定的代码在 Safari 上没有正常运行。这是由于使用了画布过滤器，因此在替换每个动画周期后使用新颜色重新绘制 img。

现在开始回答问题！

由于处理使用率高，所以不追求画布旋转路线，所以坚持使用 img 路线，可以通过向关键帧添加旋转（30度）等来旋转每个雪花。 GPU 使用率上升到 40% 到 50% 之间，但没有标记违规。顺便说一句，Firefox 上的 GPU 使用率始终高于 Windows 10 笔记本电脑上的 Edge。

这是一个使用 imgs 而不是画布的片段。初始条件需要一些整理，我们注意到雪花是固定大小的。对于响应式解决方案，它们的大小可能应与视口最小尺寸成比例。每个雪花都有固定的旋转次数，如果需要更改，最好在 JS 中计算关键帧以获得更通用的解决方案。

ffmpeg -fflags nobuffer \
 -rtsp_transport udp \
 -i rtsp://<source>/ \
 -vsync 0 \
 -copyts \
 -vcodec copy \
 -movflags frag_keyframe+empty_moov \
 -an \
 -hls_flags delete_segments \
 -f segment \
 -segment_list_flags live \
 -segment_time 1 \
 -segment_list_size 5 \
 -segment_format mpegts \
 -segment_list streaming.m3u8 \
 -segment_list_type m3u8 \
 -segment_list_entry_prefix ./ \
  %d.ts \
 -q:v 10 -vf fps=1 output_%03d.jpg

function loaded() {
    const flakeCount = 100;
    const flakesEl = document.getElementById('flakes');
    
    const imgc = document.getElementById('canvas'); // work space on which to draw a snowflake of random color
    
    // FF seemed to require that this is done rather than just innerWidth which was smaller than 100vw 
    const width = Math.max(document.documentElement.clientWidth,window.innerWidth || 0);
    const height= Math.max(document.documentElement.clientHeight,window.innerHeight || 0);
    
    init();
    function init() {
        for (var i = 0; i < flakeCount; i++) {
            let flakeEl = document.createElement('img');
            flakeEl.addEventListener('webkitAnimationEnd',animationEnd);
            flakeEl.addEventListener('animationend',animationEnd);
            flakeEl.style.animationDuration = ((Math.random() * 1) + 0.5) * 10 + 's';
            flakeEl.style.left = Math.floor(Math.random() * width) + 'px';
            flakeEl.style.top = '-100px';
            flakeEl.classList.add('descend');
            flakeEl.classList.remove('descend1');
            draw(flakeEl);
            flakesEl.appendChild(flakeEl);
        }
    }    
    function animationEnd(event) {
      reset(event.target);
    }
    function reset(flakeEl) {
        flakeEl.style.top = '-100px';
        flakeEl.style.left = Math.floor(Math.random() * width) + 'px';
        flakeEl.style.animationDuration = ((Math.random() * 1) + 0.5) * 10 + 's';
        flakeEl.style.animationDelay = '0s';
        draw(flakeEl);
        flakeEl.classList.toggle('descend');
        flakeEl.classList.toggle('descend1');
    }
    function getRandomColor() {
        let color = `invert(${getRand(40,50)}%) sepia(${getRand(30,100)}%) hue-rotate(${getRand(-360,360)}deg) saturate(${getRand(10,50)})`;
        // Safari does not support canvas fill filter so we just use a normal rgb for this test
        return 'rgb('+getRand(0,255)+','+getRand(0,255)+')';
    }
    function getRand(min,max) {
        return Math.random() * (max - min) + min;
    }
    function draw(flakeEl) {
        imgc.width = 650; // enough spaace to get a whole snowflake in
        imgc.height = imgc.width;
            var imgctx = imgc.getContext('2d');
            var width = imgc.width;
            var height = imgc.height;
            imgctx.clearRect(0,width,height);
            imgctx.lineWidth = 20;
            imgctx.lineCap = 'round';
            imgctx.fillStyle = "rgba(255,255,0.0)";
            imgctx.strokeStyle = getRandomColor();
            imgctx.fillRect(0,height);
            imgctx.translate(width/2,height/2);
            for(var count = 0; count < 6; count++) {
                imgctx.save();      
                drawSegment(imgctx,100,40);
                drawSegment(imgctx,80);
                drawSegment(imgctx,0);
                imgctx.restore();           
                imgctx.rotate(Math.PI/3);
            }
        flakeEl.src = imgc.toDataURL();
    }
    function drawSegment(context,segmentLength,branchLength) {
        context.beginPath();
        context.moveTo(0,0);
        context.lineTo(segmentLength,0);
        context.stroke();
        context.translate(segmentLength,0);
        if (branchLength > 0) {
            drawBranch(context,branchLength,1);
            drawBranch(context,-1);
        }
    }
    function drawBranch(context,direction) {
        context.save();
        context.rotate(direction*Math.PI/3);
        context.moveTo(0,0);
        context.lineTo(branchLength,0);
        context.stroke();
        context.restore();
    }
}
window.onload = loaded;

*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
html,body{
  height: 100vh;
  width: 100vw;
  roverflow: hidden;
}
#flakes {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

#canvas {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
img {
  position: absolute;
  animation-name: descend1;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  width: 100px;
  height: 100px;
}

.descend {
  animation-name: descend;
}

.descend1 {
  animation-name: descend1;
  }

@keyframes descend {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  16.66% {
    transform: translateY(calc(16.66vh + 16.66px)) rotate(30deg);
  }
  33.32% {
    transform: translateY(calc(33.32vh + 33.32px)) rotate(0deg);
  }
  49.98% {
    transform: translateY(calc(49.98vh + 49.98px)) rotate(-30deg);
  }
  66.64% {
    transform: translateY(calc(66.64vh + 66.64px)) rotate(0deg);
  }
  83.30% {
    transform: translateY(calc(83.30vh + 83.30px)) rotate(30deg);
  }
  100% {
    transform: translateY(calc(100vh + 100px)) rotate(0deg);
  }
}
@keyframes descend1 {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  16.66% {
    transform: translateY(calc(16.66vh + 16.66px)) rotate(30deg);
  }
  33.32% {
    transform: translateY(calc(33.32vh + 33.32px)) rotate(0deg);
  }
  49.98% {
    transform: translateY(calc(49.98vh + 49.98px)) rotate(-30deg);
  }
  66.64% {
    transform: translateY(calc(66.64vh + 66.64px)) rotate(0deg);
  }
  83.30% {
    transform: translateY(calc(83.30vh + 83.30px)) rotate(30deg);
  }
  100% {
    transform: translateY(calc(100vh + 100px)) rotate(0deg);
  }
}

如何使用画布和 JavaScript 使雪花形状旋转到其中心？

如何解决如何使用画布和 JavaScript 使雪花形状旋转到其中心？

解决方法

相关推荐