Mixing HTML5 Video and Canvas - HTML5 Canvas - page 319

for (var i =0; i <videos.length; i++) {
video = videos[i];
video.x += video.xunits;
video.y += video.yunits;
context.drawImage(videoElement ,video.x, video.y, video.width, video.height);
if (video.x > theCanvas.width-video.width || video.x < 0 ) {
video.angle = 180 - video.angle;
updatevideo(video);
} else if (video.y > theCanvas.height-video.height || video.y < 0) {
video.angle = 360 - video.angle;
updatevideo(video);
}
}
}
function updatevideo(video) {
video.radians = video.angle * Math.PI/ 180;
video.xunits = Math.cos(video.radians) * video.speed;
video.yunits = Math.sin(video.radians) * video.speed;
}
var numVideos = 12 ;
var maxSpeed = 10;
var videos = new Array();
var tempvideo;
var tempX;
var tempY;
var tempSpeed;
var tempAngle;
var tempRadians;
var tempXunits;
var tempYunits;
var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");
videoElement.play();
for (var i = 0; i < numVideos; i++) {
tempX = 160 ;
tempY = 190 ;
tempSpeed = 5;
tempAngle = Math.floor(Math.random()*360);
tempRadians = tempAngle * Math.PI/ 180;
tempXunits = Math.cos(tempRadians) * tempSpeed;
tempYunits = Math.sin(tempRadians) * tempSpeed;