<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First canvas Application</title>
<script src="modernizr.js"></script>
<script type="text/javascript">
window.addEventListener("load",eventWindowLoaded,false);
var Debugger=function() {};
Debugger.log=function(message){
try{
console.log(message);
}
catch(exception){
return;
}
}
function eventWindowLoaded(){
canvasApp();
}
function canvasSupport(){
return Modernizr.canvas;
}
function canvasApp(){
if(!canvasSupport()){
return;
}
var theCanvas=document.getElementById("cnavasOne");
var context= theCanvas.getContext("2d");
Debugger.log("Drawing Canvas");
function drawScreen(){
//background
context.fillStyle="#ffffaa";
context.fillRect(0, 0, 500, 300);
//text
context.fillStyle="#000000";
context.font="20px Sans-Serif";
context.textBaseline="top";
context.fillText("Hello World!", 195, 80);
//image
var helloWorldImage=new Image();
gelloWorldImage.onload=function(){
context.drawImage(helloWorldImage, 155, 110);
}
helloWorldImage.src="helloWorld.gif";
//box
context.strokeStyle="#000000";
context.strokeRect(5, 5, 490, 290);
}
deawScreen();
}
</script>
</head>
<body>
<div style="position:absolute;top:50px;left:50px;">
<canvas id="canvasOne" width="500" height="300">
your browser does not support HTML5 canvas.
</canvas>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First canvas Application</title>
<script src="modernizr.js"></script>
<script type="text/javascript">
window.addEventListener("load",eventWindowLoaded,false);
var Debugger=function() {};
Debugger.log=function(message){
try{
console.log(message);
}
catch(exception){
return;
}
}
function eventWindowLoaded(){
canvasApp();
}
function canvasSupport(){
return Modernizr.canvas;
}
function canvasApp(){
if(!canvasSupport()){
return;
}
var theCanvas=document.getElementById("cnavasOne");
var context= theCanvas.getContext("2d");
Debugger.log("Drawing Canvas");
function drawScreen(){
//background
context.fillStyle="#ffffaa";
context.fillRect(0, 0, 500, 300);
//text
context.fillStyle="#000000";
context.font="20px Sans-Serif";
context.textBaseline="top";
context.fillText("Hello World!", 195, 80);
//image
var helloWorldImage=new Image();
gelloWorldImage.onload=function(){
context.drawImage(helloWorldImage, 155, 110);
}
helloWorldImage.src="helloWorld.gif";
//box
context.strokeStyle="#000000";
context.strokeRect(5, 5, 490, 290);
}
deawScreen();
}
</script>
</head>
<body>
<div style="position:absolute;top:50px;left:50px;">
<canvas id="canvasOne" width="500" height="300">
your browser does not support HTML5 canvas.
</canvas>
</div>
</body>
</html>
No comments:
Post a Comment