@@ -2,12 +2,100 @@
< html lang ="en ">
< head >
< meta charset ="UTF-8 ">
< title > Home</ title >
< link rel ="stylesheet " href ="../css/default.css ">
< script src ="../jquery/jquery-1.12.0.min.js "> </ script >
< meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
< title > Home</ title >
< link rel ="stylesheet " href ="../css/default.css ">
< script src ="../jquery/jquery-1.12.0.min.js "> </ script >
</ head >
< body >
TEST
< div id ="main " role ="main ">
< canvas id ="respondCanvas " width ="100 " height ="100 ">
< !-- Provide fallback -->
</ canvas >
</ div >
< script type = text/javascript >
$ ( document ) . ready ( function ( ) {
//Get the canvas & context
var c = $ ( '#respondCanvas' ) ;
var ct = c . get ( 0 ) . getContext ( '2d' ) ;
var container = $ ( c ) . parent ( ) ;
//Run function when browser resizes
$ ( window ) . resize ( respondCanvas ) ;
function respondCanvas ( ) {
c . attr ( 'width' , $ ( container ) . width ( ) ) ; //max width
c . attr ( 'height' , $ ( container ) . height ( ) ) ; //max height
var x = c . width ( ) ;
var y = c . height ( ) ;
//Call a function to redraw other content (texts, images etc)
var imageObj = new Image ( ) ;
imageObj . onload = function ( ) {
ct . drawImage ( imageObj , 0 , 0 , x , y ) ;
} ;
imageObj . src = '../images/chicken.png' ;
}
//Initial call
respondCanvas ( ) ;
} ) ;
</ script >
<!--<script type = text/javascript>
$(document).ready( function(){
//Get the canvas & context
var c = $('#respondCanvas');
var ct = c.get(0).getContext('2d');
var container = $(c).parent();
//Run function when browser resize
$(window).resize( respondCanvas );
function respondCanvas(){
c.attr('width', $(container).width() ); //max width
c.attr('height', $(container).height() ); //max height
//Redraw & reposition content
var x = c.width();
var y = c.height();
ct.font = "20px Calibri";
ct.fillStyle = "#DDDDDD"; //black
ct.fillRect( 0, 0, x, y); //fill the canvas
var resizeText = "Canvas width: "+c.width()+"px";
ct.textAlign = "center";
ct.fillStyle = "#333333"; //white
ct.fillText(resizeText, (x/2), (y/2) );
}
//Initial call
respondCanvas();
});
</script>-->
<!--<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 69, 50, 300, 300);
};
imageObj.src = '../images/chicken.png';
</script>-->
</ body >
</ html >