如何使用视频而不是图像作为画布背景？
[英]How can I use video instead of image as canvas background?
问题描述
我正在尝试用视频替换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 个解决方案
解决方案1
-1 2017-11-19 17:33:48
您可以在这里查看并以此为例。
https://codepen.io/mattgrosswork/pen/jrdwK
<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>
为什么 backgroundimage 在 chrome 中不是 cssImageValue？ 我如何使用 canvas 处理背景图像但不制作新图像？
[英]why backgroundimage is not cssImageValue in chrome? how can i use canvas deal with background-image but not make a new image?
如何将 canvas 保存为图像而不是直接下载？
[英]How can I save the canvas as an image instead of downloading it directly?
如何在画布中提取图像的一部分并将其用作div的背景图像？
[英]How do I extract a portion of an image in canvas and use it as background image for a div?
如何为Google Maps API景观提供背景图片而不是背景颜色？
[英]How can I give Google Maps API landscape a background image instead of a background color?
画布-背景图像，而不是色度图像下的透明背景
[英]Canvas - background image instead transparent background under chroma image
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.