Node.js 그리기 포물선 코드 공유-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

Node.js 그리기 포물선 코드 공유

小云云

Mar 07, 2018 am 10:32 AM

javascript공유하다포물선

이 글에서는 주로 포물선 그리기를 위한 js 코드를 공유합니다. 먼저 렌더링을 보여드리겠습니다. 구체적인 방법과 함께 코드를 살펴보겠습니다.

렌더링:
Node.js 그리기 포물선 코드 공유

<!DOCTYPE HTML><html><head>
    <meta charset="utf-8">
    <title>抛物线运动效果</title>
    <style type="text/css">
        body {            overflow: hidden;        }
        .boll {            width: 50px;            height: 50px;            position: absolute;            top: 55%;            left: 55%;            background: url("redpack_show.jpg");            background-size: contain;        }
        .red-bag {            position: absolute;            left: 50%;            top:50%;            width: 200px;            height: 200px;            border-radius: 50%;            background: url("red_bag.png") no-repeat;            background-size: contain;            z-index:10;        }
    </style>
    <script type="text/javascript" src="jquery-2.1.4.js"></script>
    <script type="text/javascript" src="parabola.js"></script></head><body><p class="btns" style="margin-top:20px">
    <a href="http://www.css88.com/archives/5355" target="_blank">回到JavaScript实现的抛物线运动效果</a></p><p class="btns" style="margin-top:20px">
    <a href="#" class="btnA btn-danger" id="run" rel="popover" title="A Title" >run</a></p><p class="red-bag"></p><p id="target" class="target"></p><!--<p class="boll boll1"></p>--><script type="text/javascript">
    for(let i=1;i<80;i++){
        $("body").append(`<p class=&#39;boll boll${i}&#39;></p>`);
        let bool = "bool"+i;
        createSingle(bool,i);
//        console.log(i)
    }
    function createSingle(bool,i) {
        let left = i%2 == 0 ? (-getRandom(500,600)):(getRandom(500,600));
        let top = i%2 == 0? (getRandom(200,250)):(getRandom(200,250));
//        console.log(getRandom(0.005,0.01));
        bool = new Parabola({
            el: ".boll"+i,
            offset: [left, top],
            curvature: 0.005,
            duration: 3000,
            callback:function(){
//                alert("完成后回调")
            },
            stepCallback:function(x,y){
//                console.log(x,y);
//                $("<p>").appendTo("body").css({
//                    "position": "absolute",
//                    "top": this.elOriginalTop + y,
//                    "left":this.elOriginalLeft + x,
//                    "background-color":"rgba(244,21,50,.5)",
//                    "width":"2px",
//                    "height":"2px",
//                    "border-radius": "2px"
//                });
            }
        });
        $("#run").click(function (event) {
            event.preventDefault();
            bool.start();
        });
    }
    function getRandom(min,max) {
        return Math.random()*(max-min)+min;
    }

    //    $("#reset").click(function (event) {
    //        event.preventDefault();
    //        bool.reset()
    //    });
    //    $("#run").click(function (event) {
    //        event.preventDefault();
    //        bool.start();
    //    });
    //    $("#stop").click(function (event) {
    //        event.preventDefault();
    //        bool.stop();
    //    });
    //    $("#setOptions").click(function (event) {
    //        event.preventDefault();
    //        bool.setOptions({
    //            targetEl: $("#target"),
    //            curvature: 0.001,
    //            duration: 1000
    //        });
    //    });</script></body></html>

(function () {    var _$ = function (_this) {        return _this.constructor == jQuery ? _this : $(_this);
    };// 获取当前时间
    function now() {        return +new Date();
    }// 转化为整数
    function toInteger(text) {
        text = parseInt(text);        return isFinite(text) ? text : 0;
    }    var Parabola = function (options) {        this.initialize(options);
    };
    Parabola.prototype = {
        constructor: Parabola,        /**
         * 初始化
         * @classDescription 初始化
         * @param {Object} options 插件配置 .
         */
        initialize: function (options) {            this.options = this.options || this.getOptions(options);            var ops = this.options;            if (!this.options.el) {                return;
            }            this.$el = _$(ops.el);            this.timerId = null;            this.elOriginalLeft = toInteger(this.$el.css("left"));            this.elOriginalTop = toInteger(this.$el.css("top"));            // this.driftX X轴的偏移总量
            //this.driftY Y轴的偏移总量
            if (ops.targetEl) {                this.driftX = toInteger(_$(ops.targetEl).css("left")) - this.elOriginalLeft;                this.driftY = toInteger(_$(ops.targetEl).css("top")) - this.elOriginalTop;
            } else {                this.driftX = ops.offset[0];                this.driftY = ops.offset[1];
            }            this.duration = ops.duration;            // 处理公式常量
            this.curvature = ops.curvature;            // 根据两点坐标以及曲率确定运动曲线函数（也就是确定a, b的值）
            //a=this.curvature
            /* 公式： y = a*x*x + b*x + c;
             */
            /*
             * 因为经过(0, 0), 因此c = 0
             * 于是：
             * y = a * x*x + b*x;
             * y1 = a * x1*x1 + b*x1;
             * y2 = a * x2*x2 + b*x2;
             * 利用第二个坐标：
             * b = (y2+ a*x2*x2) / x2
             */
            // 于是
            this.b = ( this.driftY - this.curvature * this.driftX * this.driftX ) / this.driftX;            //自动开始
            if (ops.autostart) {                this.start();
            }
        },        /**
         * 初始化 配置参数 返回参数MAP
         * @param {Object} options 插件配置 .
         * @return {Object} 配置参数
         */
        getOptions: function (options) {            if (typeof options !== "object") {
                options = {};
            }
            options = $.extend({}, defaultSetting, _$(options.el).data(), (this.options || {}), options);            return options;
        },        /**
         * 定位
         * @param {Number} x x坐标 .
         * @param {Object} y y坐标 .
         * @return {Object} this
         */
        domove: function (x, y) {            this.$el.css({
                position: "absolute",
                left: this.elOriginalLeft + x,
                top: this.elOriginalTop + y
            });            return this;
        },        /**
         * 每一步执行
         * @param {Data} now 当前时间 .
         * @return {Object} this
         */
        step: function (now) {            var ops = this.options;            var x, y;            if (now > this.end) {                // 运行结束
                x = this.driftX;
                y = this.driftY;                this.domove(x, y);                this.stop();                if (typeof ops.callback === &#39;function&#39;) {
                    ops.callback.call(this);
                }
            } else {                //x 每一步的X轴的位置
                x = this.driftX * ((now - this.begin) / this.duration);                //每一步的Y轴的位置y = a*x*x + b*x + c;   c==0;
                y = this.curvature * x * x + this.b * x;                this.domove(x, y);                if (typeof ops.stepCallback === &#39;function&#39;) {
                    ops.stepCallback.call(this,x,y);
                }
            }            return this;
        },        /**
         * 设置options
         *  @param {Object} options 当前时间 .
         */
        setOptions: function (options) {            this.reset();            if (typeof options !== "object") {
                options = {};
            }            this.options = $.extend(this.options,options);            this.initialize(this.options);            return this;
        },        /**
         * 开始
         */
        start: function () {            var self = this;            // 设置起止时间
            this.begin = now();            this.end = this.begin + this.duration;            if (this.driftX === 0 && this.driftY === 0) {                // 原地踏步就别浪费性能了
                return;
            }            /*timers.push(this);
             Timer.start();*/
            if (!!this.timerId) {
                clearInterval(this.timerId);                this.stop();
            }            this.timerId = setInterval(function () {                var t = now();
                self.step(t);

            }, 13);            return this;
        },        /**
         * 重置
         */
        reset: function (x, y) {            this.stop();
            x = x ? x : 0;
            y = y ? y : 0;            this.domove(x, y);            return this;
        },        /**
         * 停止
         */
        stop: function () {            if (!!this.timerId) {
                clearInterval(this.timerId);

            }            return this;
        }
    };    var defaultSetting = {
        el: null,        //偏移位置
        offset: [0, 0],        //终点元素，这时就会自动获取该元素的left、top，设置了这个参数，offset将失效
        targetEl: null,        //运动的时间，默认500毫秒
        duration: 500,        //抛物线曲率，就是弯曲的程度，越接近于0越像直线，默认0.001
        curvature: 0.001,        //运动后执行的回调函数
        callback: null,        // 是否自动开始，默认为false
        autostart: false,        //运动过程中执行的回调函数
        stepCallback: null
    };
    window.Parabola = Parabola;
})();

관련 기사

자바 스크립트 행동 : 실제 예제 및 프로젝트Apr 19, 2025 am 12:13 AM

실제 세계에서 JavaScript의 응용 프로그램에는 프론트 엔드 및 백엔드 개발이 포함됩니다. 1) DOM 운영 및 이벤트 처리와 관련된 TODO 목록 응용 프로그램을 구축하여 프론트 엔드 애플리케이션을 표시합니다. 2) Node.js를 통해 RESTFULAPI를 구축하고 Express를 통해 백엔드 응용 프로그램을 시연하십시오.

JavaScript 및 웹 : 핵심 기능 및 사용 사례Apr 18, 2025 am 12:19 AM

웹 개발에서 JavaScript의 주요 용도에는 클라이언트 상호 작용, 양식 검증 및 비동기 통신이 포함됩니다. 1) DOM 운영을 통한 동적 컨텐츠 업데이트 및 사용자 상호 작용; 2) 사용자가 사용자 경험을 향상시키기 위해 데이터를 제출하기 전에 클라이언트 확인이 수행됩니다. 3) 서버와의 진실한 통신은 Ajax 기술을 통해 달성됩니다.

JavaScript 엔진 이해 : 구현 세부 사항Apr 17, 2025 am 12:05 AM

보다 효율적인 코드를 작성하고 성능 병목 현상 및 최적화 전략을 이해하는 데 도움이되기 때문에 JavaScript 엔진이 내부적으로 작동하는 방식을 이해하는 것은 개발자에게 중요합니다. 1) 엔진의 워크 플로에는 구문 분석, 컴파일 및 실행; 2) 실행 프로세스 중에 엔진은 인라인 캐시 및 숨겨진 클래스와 같은 동적 최적화를 수행합니다. 3) 모범 사례에는 글로벌 변수를 피하고 루프 최적화, Const 및 Lets 사용 및 과도한 폐쇄 사용을 피하는 것이 포함됩니다.

Python vs. JavaScript : 학습 곡선 및 사용 편의성Apr 16, 2025 am 12:12 AM

Python은 부드러운 학습 곡선과 간결한 구문으로 초보자에게 더 적합합니다. JavaScript는 가파른 학습 곡선과 유연한 구문으로 프론트 엔드 개발에 적합합니다. 1. Python Syntax는 직관적이며 데이터 과학 및 백엔드 개발에 적합합니다. 2. JavaScript는 유연하며 프론트 엔드 및 서버 측 프로그래밍에서 널리 사용됩니다.

Python vs. JavaScript : 커뮤니티, 라이브러리 및 리소스Apr 15, 2025 am 12:16 AM

Python과 JavaScript는 커뮤니티, 라이브러리 및 리소스 측면에서 고유 한 장점과 단점이 있습니다. 1) Python 커뮤니티는 친절하고 초보자에게 적합하지만 프론트 엔드 개발 리소스는 JavaScript만큼 풍부하지 않습니다. 2) Python은 데이터 과학 및 기계 학습 라이브러리에서 강력하며 JavaScript는 프론트 엔드 개발 라이브러리 및 프레임 워크에서 더 좋습니다. 3) 둘 다 풍부한 학습 리소스를 가지고 있지만 Python은 공식 문서로 시작하는 데 적합하지만 JavaScript는 MDNWebDocs에서 더 좋습니다. 선택은 프로젝트 요구와 개인적인 이익을 기반으로해야합니다.

C/C에서 JavaScript까지 : 모든 것이 어떻게 작동하는지Apr 14, 2025 am 12:05 AM

C/C에서 JavaScript로 전환하려면 동적 타이핑, 쓰레기 수집 및 비동기 프로그래밍으로 적응해야합니다. 1) C/C는 수동 메모리 관리가 필요한 정적으로 입력 한 언어이며 JavaScript는 동적으로 입력하고 쓰레기 수집이 자동으로 처리됩니다. 2) C/C를 기계 코드로 컴파일 해야하는 반면 JavaScript는 해석 된 언어입니다. 3) JavaScript는 폐쇄, 프로토 타입 체인 및 약속과 같은 개념을 소개하여 유연성과 비동기 프로그래밍 기능을 향상시킵니다.

JavaScript 엔진 : 구현 비교Apr 13, 2025 am 12:05 AM

각각의 엔진의 구현 원리 및 최적화 전략이 다르기 때문에 JavaScript 엔진은 JavaScript 코드를 구문 분석하고 실행할 때 다른 영향을 미칩니다. 1. 어휘 분석 : 소스 코드를 어휘 단위로 변환합니다. 2. 문법 분석 : 추상 구문 트리를 생성합니다. 3. 최적화 및 컴파일 : JIT 컴파일러를 통해 기계 코드를 생성합니다. 4. 실행 : 기계 코드를 실행하십시오. V8 엔진은 즉각적인 컴파일 및 숨겨진 클래스를 통해 최적화하여 Spidermonkey는 유형 추론 시스템을 사용하여 동일한 코드에서 성능이 다른 성능을 제공합니다.

브라우저 너머 : 실제 세계의 JavaScriptApr 12, 2025 am 12:06 AM

실제 세계에서 JavaScript의 응용 프로그램에는 서버 측 프로그래밍, 모바일 애플리케이션 개발 및 사물 인터넷 제어가 포함됩니다. 1. 서버 측 프로그래밍은 Node.js를 통해 실현되며 동시 요청 처리에 적합합니다. 2. 모바일 애플리케이션 개발은 재교육을 통해 수행되며 크로스 플랫폼 배포를 지원합니다. 3. Johnny-Five 라이브러리를 통한 IoT 장치 제어에 사용되며 하드웨어 상호 작용에 적합합니다.

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.