HTML and CSS Reference
In-Depth Information
}
function
function canvasApp () {
iif ( ! canvasSupport ()) {
return
return ;
}
//*** set rotation value
var
var rotation = 0 ;
//***
function
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
var angleInRadians = rotation * Math . PI / 180 ;
var
var x = 100 ;
var
var y = 100 ;
var
var videoWidth = 320 ;
var
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
var theCanvas = document . getElementById ( "canvasOne" );
var
var context = theCanvas . getContext ( "2d" );
videoElement . setAttribute ( "loop" , "true" );
videoElement . play ();
function
function gameLoop () {
Search WWH ::




Custom Search