Показать сообщение отдельно
  #5 (permalink)  
Старый 06.12.2014, 19:29
Профессор
Отправить личное сообщение для Siend Посмотреть профиль Найти все сообщения от Siend
 
Регистрация: 04.02.2012
Сообщений: 196

console.clear();

        if (!window.requestAnimationFrame) {

            window.requestAnimationFrame = (function () {

                return window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function (callback, element) {
                    window.setTimeout(callback, 16.7);
                };
            })();
        }

        var Elements = {
            canvas: []
        }

        var Class = function () {
            var _class = function (canvas_element) {
                if (_class.init && typeof _class.init == "function") {
                    _class.init.apply(this, Array.prototype.slice.call(arguments));
                }
            };
            _class.fn = _class.prototype;

            _class.extend = function (prop) {
                for (var i in prop) {
                    _class[i] = prop[i];
                }
            };
            _class.include = function (prop) {
                for (var i in prop) {
                    _class.fn[i] = prop[i];
                }
            };
            return _class;
        };
        var T = 0;
        var CanvasControl = new Class();
        CanvasControl.extend({
            init: function (canvas_element) {
                this.canvas = canvas_element;
                this.canvas.width = canvas_element.offsetWidth;
                this.canvas.height = canvas_element.offsetHeight;
                this.ctx = this.canvas.getContext("2d");
                this.WIDTH = window.innerWidth;
                this.HEIGHT = window.innerHeight;
                this.canvas.onmousemove = this.myMove;
                Elements.canvas.push(this)
                this.EP = Elements.canvas.length-1
            }
        });
        CanvasControl.include({
            ClearStyle: function () {
                this.ctx.strokeStyle = "rgba(0,0,0,1)";
                this.ctx.fillStyle = "rgba(0,0,0,1)";
                this.ctx.lineWidth = 1;
            },
            RECT: function (x, y, w, h) {
                this.ctx.beginPath();
                this.ctx.rect(x, y, w, h);
                this.ctx.fill();
                this.ctx.stroke();
            },
            DrawText: function (s, x, y) {
                this.ctx.textBaseline = "middle";
                this.ctx.textAlign = "center";
                this.ctx.strokeText(s, x, y);
            },
            draw: function () {
                this.RECT(0, 0, 100, 100);
            },
            myMove: function (e) {
                //this.xMouse = e.pageX// - this.Cleft
                //this.yMouse = e.pageY// - this.Ctop

                console.log(this)
            }
        });

        var can1 = new CanvasControl(document.getElementById("canvasA"));

        function G() {
            window.requestAnimationFrame(function () {
                can1.draw()
                G()
            });
        }
        G()


Сейчас в конце, в функции G происходит вызов requestAnimationFrame, а до этого была функция animate внутри самого класса, которая пыталась вызывать requestAnimationFrame, но каждый следующий объект этого класса её перекрывал.
Ответить с цитированием