춤추는 우산을 구현한 HTML5 애니메이션

이번에는 춤추는 우산을 구현하기 위한 html5animation을 가져왔습니다. 춤추는 우산의 html5 애니메이션을 구현하기 위한 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

HMTL5의 학습은 더 이상 낯설지 않습니다. 어제 우산 데모를 만들었습니다.

주로 두 가지 방법을 사용했습니다: 중심점 변환. 다양한 애니메이션은 timer에 의해 제어됩니다.

모든 코드는 다음과 같습니다.

  <canvas></canvas>
    <p></p>
    <script>
        var ctx;        var everything = [];        var cwidth = 1200;        var cheight = 600;        var updowntime = 0;        var rotatetime = 0;        var my = 2;        var updown;        var rotateangle = 0;        function Umbrellas(sx, sy, fillStyle) {            this.x = sx;            this.y = sy;            this.fillStyle = fillStyle;            this.draw = drawUmbrella;            this.moveit = moveumbrella;
        }        function drawUmbrella() {            //先画半圆            ctx.fillStyle = this.fillStyle;
            ctx.beginPath();
            ctx.arc(this.x, this.y, 30, 0, Math.PI, true);
            ctx.closePath();
            ctx.fill();            // ctx.save();            ctx.fillStyle = "blue";
            ctx.fillRect(this.x - 1.5, this.y, 1.5, 40);//画伞柄 是一个细长的矩形
            ctx.beginPath();
            ctx.strokeStyle = "blue";
            ctx.arc(this.x - 5, this.y + 40, 4, Math.PI, Math.PI * 2, true);//伞的钩子 是一个半圆
            ctx.stroke();
            ctx.closePath();
        }        function moveumbrella(dx, dy) {            this.x += dx;            this.y += dy;
        }        function init() {
            ctx = document.getElementById("myCanve").getContext(&#39;2d&#39;);
            ctx.translate(200, 300);            for (var i = 0; i < 10; i++) {                var um = new Umbrellas(i * 70, 0, "rgb(" + (30 * i) + "," + (255 - 30 * i) + ",255)");
                everything.push(um);
            }
            updown = setInterval(change, 100);
             setTimeout(function () {
                 clearInterval(updown);
                 ctx.translate(300,0);//改变中心点
                 setInterval(rotat, 100);
            }, 10000);         }        //updown  
        function change() {            if (updowntime % 50 == 0) {
                my = -my;
            }            // 清屏要关注到原中心点            clear(-200,-300);
            updowntime++;       
            for (var i = 0; i < everything.length; i++) {                if (i % 2 == 0) {
                    everything[i].moveit(0, my);
                } else {
                    everything[i].moveit(0, -my);
                }
                everything[i].draw();
            }
            $("#ta").html("坐标y:" + everything[0].y + "updowntime:" + updowntime);            //放在这才有效 在执行方法里面停止
            if (updowntime == 100) {
                clearInterval(updown);                //过渡方法            }
        }        //选择
        function rotat() {
            clear(-400, -300);
            rotatetime++;            for (var i = 0; i < everything.length; i++) {
                ctx.save();
                ctx.rotate(Math.PI * (2 / 4 + i / 4));
                ctx.translate(0, rotateangle);                // 统一坐标                everything[i].x = 0;
                everything[i].y = 0;
                everything[i].draw();
                ctx.restore();
            }
            rotateangle++;
            $("#ta").html("角度:" + rotateangle + "   rotatetime:" + rotatetime);            if (rotateangle == 70) {
                rotateangle = -rotateangle;
            }
        }        function clear(x,y) {
            ctx.clearRect(x, y, 1200, 600);
        }
        window.onload = function () {
            init();
        }    </script>

이 작고 아름다운 것들이 당신에게 영감을 주나요?

오브젝트가 생성되지 않으면 그려진 우산을 제어하기가 쉽지 않습니다. 아래 코드는 정적 우산입니다

  function drawTop(ctx,fillStyle) {
                ctx.fillStyle = fillStyle;
                ctx.beginPath();
                ctx.arc(0, 0, 30, 0, Math.PI, true);
                ctx.closePath();
                ctx.fill();
            }
            function drawGrip(ctx) {
                ctx.save();
                ctx.fillStyle = "blue";
                ctx.fillRect(-1.5, 0, 1.5, 40);
                ctx.beginPath();
                ctx.strokeStyle = "blue";
                ctx.arc(-5, 40, 4, Math.PI, Math.PI * 2, true);
                ctx.stroke();
                ctx.closePath();
                ctx.restore();
            }
            function draw() {
                var ctx = document.getElementById("myCanve").getContext("2d");
                ctx.translate(150, 150);
                for (var i = 0; i <p>이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! </p><p>추천 자료: </p><p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-388844.html" target="_blank">Nodejs 라우팅 및 컨트롤러 사용하기</a><br></p><p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-388840.html" target="_blank">Nodejs는 Mongoose를 사용하여 모델과 API를 만듭니다. </a><br></p><p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-388834.html" target="_blank">nodejs로 서버를 구축하는 방법</a><br></p>

위 내용은 춤추는 우산을 구현한 HTML5 애니메이션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!