如何使用视频而不是图像作为画布背景?

时间:2017-06-21 13:50:30

标签: javascript html5

我试图用视频替换html画布上的背景图像。我试图使画布透明并在背景div中运行它,但这不起作用。我也试图改变代码来绘制视频而不是图像,但我不知道如何使它工作。

    var Game = {};

    Game.gameState = 'menu';
    Game.actors = [];
    Game.backgrounds = [];
    Game.rules = [];
    Game.behaviors = [];
    Game.textElements = [];
    Game.globals = {};

    Game.mins = 2;
    Game.secs = Game.mins * 60;
    Game.currentSeconds = 0;
    Game.currentMinutes = 0;
    Game.countdownStarted = false;
    Game.timeRemaining = '';

    Game.Background = function(options) {
        'use strict';

        if(options !== undefined && options.name !== undefined && options.img !== undefined) {
            options = Game.extend(this, options);
            this.img = Game.loadSprite(options.img);
        } else {
            return false;
        }
    };

    Game.Background.prototype.draw = function() {
        'use strict';

        Game.drawSprite(this.img, this.x, this.y, this.rotation, this.scale);
    };

    Game.Actor = function(options) {
        'use strict';

        options = Game.extend(this, options);

        if(options !== undefined && options.name !== undefined && options.img !== undefined) {
            options = Game.extend(this, options);
            this.vX = 0;
            this.vY = 0;
            this.aX = 0;
            this.aY = 0;
            this.img = Game.loadSprite(options.img);
            this.id = Game.actors.length;
        } else {
            return false;
        }
    };

    Game.Actor.prototype.draw = function () {
        'use strict';
        if(this.hasOwnProperty('player') && this.player){
            Game.drawSprite(this.img, this.x, this.y, this.rotation, this.scale);
        } else {
            Game.drawSprite(this.img, this.x += this.vX, this.y += this.vY, this.rotation, this.scale);
        }

    };

    Game.defaultCanvas = {
        width: 1920,
        height: 1080,
        color: 'rgba(0,0,0,0)'
    };

    Game.addActor = function(obj) {
        'use strict';

        if (this.actors === undefined) {
            this.actors = [];
        }

        this.actors.push(obj);
    };

    Game.removeActor = function(obj) {
        for(var i = 0, len = this.actors.length; i < len; i++) {
            if(this.actors[i].id = obj.id) {
                this.actors.splice(i, 1);
                break;
            }
        }
    };

    //Code smell
    Game.removeActorBy = function(param, value) {
        var localActors = this.actors;
        for(var i = 0, len = localActors.length; i < len; i++) {
            if(i === localActors.length) {
                break;
            }
            if(param === 'state' && localActors[i].hasOwnProperty('state')){
                if(localActors[i].state === value) {
                    localActors.splice(i, 1);
                    i = 0;
                }
            }
        }

        this.actors = localActors;
    };

    Game.addBackground = function(obj) {
        'use strict';
        if (this.backgrounds === undefined) {
            this.backgrounds = [];
        }

        this.backgrounds.push(obj);
    };

    //Code smell
    Game.removeBackgroundBy = function(param, value) {
        var localBackground = this.backgrounds;
        for(var i = 0, len = localBackground.length; i < len; i++) {
            if(i === localBackground.length) {
                break;
            }
            if(param === 'state' && localBackground[i].hasOwnProperty('state')){
                if(localBackground[i].state === value) {
                    localBackground.splice(i, 1);
                    i = 0;
                }
            }
        }

        this.backgrounds = localBackground;
    };

    Game.addBehavior = function(behavior) {
        'use strict';

        if(this.behaviors === undefined) {
            this.behaviors = [];
        }

        behavior.id = this.behaviors.length + 1;
        this.behaviors.push(behavior);
    };

    Game.removeBehavior = function(behavior) {
        for(var i = 0, len = this.behaviors.length; i < len; i++) {
            if(this.behaviors[i].id = behavior.id) {
                this.behaviors.splice(i, 1);
                break;
            }
        }
    };

    Game.addRule = function(rule) {
        'use strict';

        if(this.rules === undefined) {
            this.rules = [];
        }

        rule.id = this.rules.length + 1;
        this.rules.push(rule);
    };

    Game.removeRule = function(rule) {
        for(var i = 0, len = this.rules.length; i < len; i++) {
            if(this.rules[i].id === rule.id) {
                this.rules.splice(i, 1);
                break;
            }
        }
    };

    Game.addTextElement = function(textEl) {
        'use strict';

        if(this.textElements === undefined) {
            this.textElements = [];
        }

        textEl.id = this.textElements.length + 1;
        this.textElements.push(textEl);
    };

    Game.removeTextElement = function(textEl) {
        for(var i = 0, len = this.textElements.length; i < len; i++) {
            if(this.textElements[i].id = textEl.id) {
                this.textElements.splice(i, 1);
                break;
            }
        }
    };

    //Code smell
    Game.removeTextElementBy = function(param, value) {
        var localTextElements = this.textElements;
        for(var i = 0, len = localTextElements.length; i < len; i++) {
            if(i === localTextElements.length) {
                break;
            }
            if(param === 'state' && localTextElements[i].hasOwnProperty('state')){
                if(localTextElements[i].state === value) {
                    localTextElements.splice(i, 1);
                    i = 0;
                }
            }
        }

        this.textElements = localTextElements;
    };

    Game.init = function(options) {
        'use strict';

        var canvas = document.getElementById(options.canvas),
            context = canvas.getContext('2d');

        options = this.extend(this.defaultCanvas, options);

        context.canvas.width = options.width;
        context.canvas.height = options.height;
        context.fillStyle = options.color;
        this.ctx = context;
        this.clear();
        this.gameState = 'menu';
        this.goal = '';
        this.playerScore = 0;
        this.cpuScore = 0;
        this.scored = false;
        this.timeRemaining = '';
    };

    Game.clear = function() {
        'use strict';

        this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
    };

    Game.shutdown = function() {
        'use strict';

        this.actors.length = 0;
        this.backgrounds.length = 0;
    };

    Game.render = function() {
        'use strict';
        var actors = this.actors,
            backgrounds = this.backgrounds,
            behaviors = this.behaviors;

        this.clear();

        if(this.gameState === 'game') {

            if(!this.countdownStarted) {
                setTimeout('Game.countdown()',1000);
                this.countdownStarted = true;
            }

            if(this.currentMinutes === 0 && this.currentSeconds === "00") {
                this.gameState = 'over';
            }

            for (var i = 0, len = backgrounds.length; i < len; i++) {
                var currentBackground = backgrounds[i];

                if(currentBackground.state === 'game') {
                    currentBackground.draw();
                }
            }

            for(var i = 0, len = this.behaviors.length; i < len; i++) {
                var currentBehavior = this.behaviors[i];

                currentBehavior.func.call();
            }

            for(var i = 0, len = this.rules.length; i < len; i++) {
                var currentRule = this.rules[i];

                currentRule.func.call();
            }

            for(var i = 0, len = this.textElements.length; i < len; i++) {
                var currentTextEl = this.textElements[i];
                if(currentTextEl.state === 'game') {
                    this.drawText(currentTextEl.value, currentTextEl.x, currentTextEl.y, currentTextEl.color, 'bold 50px Arial');
                }
            }

            for(var i = 0, len = actors.length; i < len; i++) {
                var currentActor = actors[i];
                for(var j = i, len = actors.length; j < len; j++) {
                    var actedAgainst = actors[j];
                    if(currentActor.name !== actedAgainst.name) {
                        if(!(currentActor.name === 'player' && actedAgainst.name === 'cpu')) {

                            Physics.detectCollision(currentActor, actedAgainst, 'round');
                        } else {
                            //console.log(actedAgainst.name);
                        }

                    }
                }

                Physics.calculateFriction(currentActor);
                Physics.calculateAcceleration(currentActor);
                var collide = Physics.wallCollision(currentActor, currentActor.bounds);

                if(collide) {
                    if(currentActor.name === 'cpu') {
                        currentActor.vX = 0;
                    }
                }

                currentActor.draw();
            }

            this.drawText(this.timeRemaining, 50, 1020, '#FFFFFF', 'bold 32px Arial');
            this.drawText(this.timeRemaining, 1800, 1020, '#FFFFFF', 'bold 32px Arial');

        } else if(this.gameState === 'menu'){

            for (var i = 0, len = backgrounds.length; i < len; i++) {
                var currentBackground = backgrounds[i];

                if(currentBackground.state === 'menu') {
                    currentBackground.draw();
                }
            }

            for(var i = 0, len = actors.length; i < len; i++) {
                var currentActor = actors[i];
                if(currentActor.state === 'menu'){
                    currentActor.draw();
                }
            }
        } else if(this.gameState === 'over') {

            for (var i = 0, len = backgrounds.length; i < len; i++) {
                var currentBackground = backgrounds[i];

                if(currentBackground.state === 'over') {
                    currentBackground.draw();
                }
            }

            for(var i = 0, len = this.textElements.length; i < len; i++) {
                var currentTextEl = this.textElements[i];

                if(currentTextEl.state === 'over') {
                    this.drawText(currentTextEl.value, currentTextEl.x, currentTextEl.y, currentTextEl.color, 'bold 25px Arial');
                }
            }
        }

        var that = this;

        requestAnimationFrame(function(){
            that.run();
        });
    };

    Game.run = function() {
        this.render();
    };

    Game.loadSprite = function(imageName) {
        var image = new Image();
        image.src = imageName;
        return image;
    };

    Game.drawSprite = function(imageObject, x, y, rotation, scale) {
        var w = imageObject.width,
            h = imageObject.height,
            ctx = this.ctx;

        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(rotation);
        ctx.scale(scale, scale);
        ctx.drawImage(imageObject, 0, 0, w, h, -w/2, -h/2, w, h);
        ctx.restore();
    };

    Game.drawText = function(text, x, y, color, font) {
        var ctx = this.ctx;
        ctx.fillStyle = color;
        ctx.font = font;
        ctx.fillText(text, x, y);
    };


    Game.extend = function() {
        for(var i = 1, len = arguments.length; i < len; i++) {
            for(var key in arguments[i]) {
                if(arguments[i].hasOwnProperty(key)) {
                    arguments[0][key] = arguments[i][key];
                }
            }
            return arguments[0];
        }
    };

    Game.updateActorsWithInput = function(event, source) {

        for(var i = 0, len = Game.actors.length; i < len; i++) {
            var currentActor = Game.actors[i];
            if(currentActor.hasOwnProperty('player') && currentActor.player) {
                if(source === 'mouse') {
                    var oldX = currentActor.x;
                    var oldY = currentActor.y;
                    currentActor.x = event.clientX;
                    currentActor.y = event.clientY;
                    currentActor.aX = (currentActor.x - oldX) * 0.2;
                    currentActor.aY = (currentActor.y - oldY) * 0.2;
                    currentActor.vX += currentActor.aX;
                    currentActor.vY += currentActor.aY;
                } else {
                    var oldX = currentActor.x;
                    var oldY = currentActor.y;
                    currentActor.x = event.touches[0].pageX;
                    currentActor.y = event.touches[0].pageY;
                    currentActor.aX = (currentActor.x - oldX) * 0.2;
                    currentActor.aY = (currentActor.y - oldY) * 0.2;
                    currentActor.vX += currentActor.aX;
                    currentActor.vY += currentActor.aY;

                }
            }
        }
    };

    Game.startTimer = function() {
        this.countdownStarted = true;
    };

    Game.getTimeRemaining = function() {
        return this.timeRemaining;
    };

    Game.countdown = function() {
        this.currentMinutes = Math.floor(this.secs / 60);
        this.currentSeconds = this.secs % 60;

        if(this.currentSeconds <= 9) {
            this.currentSeconds = "0" + this.currentSeconds;
        }

        this.secs--;
        this.timeRemaining = this.currentMinutes + ":" + this.currentSeconds;
        if(this.secs !== -1) setTimeout('Game.countdown()',1000);
    };

    Game.start = function(e) {
        this.removeActorBy('state', 'menu');
        this.removeBackgroundBy('state', 'menu');

        Game.mins = 2;
        Game.secs = Game.mins * 60;
        Game.currentSeconds = 0;
        Game.currentMinutes = 0;
        Game.countdownStarted = false;
        Game.timeRemaining = '';

        this.gameState = 'game';
        Game.gameState = 'game';
        this.run();
    };

    document.addEventListener('mousemove', function(e){
        e.preventDefault();
        Game.updateActorsWithInput(e, 'mouse');
    });

    document.addEventListener('touchmove', function(e){
        e.preventDefault();
        Game.updateActorsWithInput(e, 'touch');
    });

    document.addEventListener('mousedown', function(e){
        e.preventDefault();
        if(Game.gameState === 'menu' || Game.gameState === 'over') {
            Game.start(e);
        }
    });

    document.addEventListener('touchstart', function(e){
        e.preventDefault();
        if(Game.gameState === 'menu' || Game.gameState === 'over') {
            Game.start(e);
        }
    });

HTML w/ Javascript:

    <!DOCTYPE html>
 <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <link href="hockey.css" rel="stylesheet" type="text/css"/>
    </head>
    <body onload>
        <div id="bkg" class="video"><video id="video1" class="vidarray" preload="none" autoplay loop ><source src="rink2.mp4" type="video/mp4"></video></div>
        <canvas id="airhockey"></canvas>
        <script src="physics.js"></script>
        <script src="hockey.js"></script>
        <script>


            var puck = new Game.Actor({
                name: 'puck',
                img: 'disc.png',
                x: 1000,
                y: 540,
                width: 50,
                height: 50,
                radius: 25,
                mass: 5,
                state: 'game'
            });

            var player = new Game.Actor({
                name: 'player',
                img: 'puck.png',
                x: 320,
                y: 500,
                width: 100,
                height: 100,
                radius: 50,
                mass: 10,
                player: true,
                input: 'touch',
                state: 'game'
            });

            var cpu = new Game.Actor({
                name: 'cpu',
                img: 'puck.png',
                x: 1700,
                y: 500,
                width: 100,
                height: 100,
                radius: 50,
                mass: 10,
                cpu: true,
                target: puck,
                state: 'game'
            });

            var puckBounds = {
                x1: puck.radius,
                y1: puck.radius,
                x2: 1920 - puck.radius,
                y2: 1080 - puck.radius
            };

            var playerBounds = {
                x1: player.radius,
                y1: player.radius,
                x2: 1920 - player.radius,
                y2: 1080 - player.radius
            };

            var cpuBounds = {
                x1: cpu.radius,
                y1: cpu.radius,
                x2: 1920 - cpu.radius,
                y2: 1080 - cpu.radius
            };

            player.bounds = playerBounds;
            puck.bounds = puckBounds;
            cpu.bounds = cpuBounds;

            Game.globals.playerScore = 0;

            var clearGoalText = function() {
                goalText.value = '';
            };

            var faceoff = function() {
                cpu.x = 1700;
                cpu.y = 500;
                cpu.vX = 0;
                cpu.vY = 0;
                player.x = 120;
                player.y = 390;
                player.vX = 0;
                player.vY = 0;
                puck.x = 1000;
                puck.y = 540;
                puck.vX = 0;
                puck.vY = 0.3;
                setTimeout('clearGoalText()', 1500);
            };

            var cpuBehaviorFunc = function() {
                var puckX = Math.round(puck.x);
                var puckVY = Math.round(puck.vY);
                var currentActorX = Math.round(cpu.x);
                var currentActorVX = Math.round(cpu.vX);

                //If puck is moving in opposite direction and is not in danger of goal, move cpu back to middle
                if(puckVY > 1700) {
                    if(currentActorX < 0) { //Paddle is over
                        cpu.vX = 1;
                    } else if(currentActorX  > 0) { //Paddle is under middle
                        cpu.vX = -1;
                    }
                } else if(puckVY < 1700) { //Puck is moving towards paddle
                    //As long as puck's x position and paddle's x position are different
                    if(currentActorX != puckX) {
                        if(puckX < currentActorX - 100) {
                            cpu.vX = puckVY;
                        } else if(puckX > currentActorX + 100) {
                            if(cpu.vX != puckVY) {
                                cpu.vX = Math.abs(puckVY);
                            }
                        }
                    } else {
                        cpu.vX = 0;
                    }
                }
            };

            var cpuBehavior = { func: cpuBehaviorFunc };

            var cpuScoringRuleFunc = function() {

                if(puck.y > 370 && puck.y < 700 && puck.x < 40) {
                    cpuScoreText.value++;
                    goalText.value = 'Goal!!!';
                    faceoff();
                }
            };

            var cpuScoringRule = { func: cpuScoringRuleFunc };

            var playerScoringRuleFunc = function() {

                if(puck.y > 370 && puck.y < 700 && puck.x > 1880) {
                    playerScoreText.value++;
                    gameOverText.value = 'Game Over! You have scored ' + playerScoreText.value + ' goals!'
                    goalText.value = 'Goal!!!';
                    faceoff();
                }
            };

            var playerScoringRule = { func: playerScoringRuleFunc };

             countdownTimerRuleFunc = function() {
                timerText.value = Game.getTimeRemaining();
            };

            var countdownTimerRule = { func: countdownTimerRuleFunc };

            var playerScoreText = { value: 0, x: 77, y: 70, color: 'white', state: 'game' };
            var cpuScoreText = { value: 0, x: 1800, y: 70, color: 'white', state: 'game' };
            var timerText = { value: '', x: 1000, y: 800, color: 'white', state: 'game' };
            var goalText = { value: '', x: 960, y: 540, color: 'e41e27', state: 'game' };
            var gameOverText = { value: 'Game Over! You have scored ' + Game.globals.playerScore + ' goals!', x: 730, y: 540, color: '#e41e27', state: 'over' };

            Game.addActor(puck);
            Game.addActor(player);
            Game.addActor(cpu);
            Game.addBehavior(cpuBehavior);
            Game.addRule(cpuScoringRule);
            Game.addRule(playerScoringRule);
            Game.addTextElement(playerScoreText);
            Game.addTextElement(cpuScoreText);
            Game.addTextElement(timerText);
            Game.addTextElement(goalText);
            Game.addTextElement(gameOverText);

            Game.init({canvas: 'airhockey'});
            Game.start();

        </script>

    </body>
</html>

CSS

        body {
            margin: 0;
            padding: 0;
        }
        #rink {
            top: 0px;
            z-index: -1;
            left: 0px;
            height: 1080px;
            width: 1920px;
            position: fixed;
            overflow: none;
        }

        #leftpuck {
            height: 150px;
            width: 150px;
            top: 50%;
            left: 20%;
            background-image: url(puck.png);
        }

        #rightpuck {
            height: 150px;
            width: 150px;
            top: 50%;
            left: 70%;
            background-image: url(puck.png);
        }

        #airhockey {
            position: fixed;
            z-index: 1;
            top: 0px;
            left: 0px;
            height: 1080px;
            width: 1920px;
            background-image: url(rink2.gif);
            background-size: cover;
            overflow: none;
        }

1 个答案:

答案 0 :(得分:-1)

您可以在这里查看并以此为例....

counting the number of words in a string in R

<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

<!--  Content  -->
<article>
  <h1>GROSS DESIGN co. <br /> <span>(Made by <a href="http://mattgross.io" target="_blank">Matt Gross</a>, for <a href="https://evenvision.com">EvenVision</a>)</span></h1>
</article>

<!--  Video is muted & autoplays, placed after major DOM elements for performance & has an image fallback  -->
<video autoplay loop id="video-background" muted plays-inline>
  <source src="https://player.vimeo.com/external/158148793.hd.mp4?s=8e8741dbee251d5c35a759718d4b0976fbf38b6f&profile_id=119&oauth2_token_id=57447761" type="video/mp4">
</video>