HTML and CSS Reference
In-Depth Information
function canvasApp() {
if (!canvasSupport()) {
return;
}
//*** set rotation value
var rotation = 0;
//***
function drawScreen () {
//Background
context.fillStyle = '#ffffaa';
context.fillRect(0, 0, theCanvas.width, theCanvas.height);
//Box
context.strokeStyle = '#000000';
context.strokeRect(5, 5, theCanvas.width-10, theCanvas.height-10);
//video
//*** Start rotation calculation
context.save();
context.setTransform(1,0,0,1,0,0);
var angleInRadians = rotation * Math.PI / 180;
var x = 100;
var y = 100;
var videoWidth=320;
var videoHeight=240;
context.translate(x+.5*videoWidth, y+.5*videoHeight);
context.rotate(angleInRadians);
//****
context.drawImage(videoElement ,-.5*videoWidth, -.5*videoHeight);
//*** restore screen
context.restore();
rotation++;
//***
}
var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");
videoElement.setAttribute("loop", "true"); videoElement.play();
setInterval(drawScreen, 33);
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="500">
Your browser does not support HTML5 Canvas.
</canvas>
