<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 Canvas</title>
<script type="text/javascript">
function loadcanvas(){
var canvas;
var context;
canvas = document.getElementById("mycanvas");
context = canvas.getContext("2d");
drawText(context);
}
function drawText(c){
setShadow(c, "#FF0000");
c.font = "30pt helvetica";
c.fillStyle = "#FF0000";
c.fillText ("Mobile-Web-App", 50, 50);
setShadow(c, "#00FF00");
c.font = "18pt helvetica";
c.fillStyle = "#00FF00";
c.fillText ("http://mobile-web-app.blogspot.com/", 50, 100);
setShadow(c, "#0000FF");
c.font = "16pt helvetica";
c.fillStyle = "#0000FF";
c.fillText ("HTML5 canvas - Text", 50, 150);
}
function setShadow(c, color){
c.shadowOffsetX = 5;
c.shadowOffsetY = 5;
c.shadowColor = color;
c.shadowBlur = 5;
}
</script>
</head>
<body onload="loadcanvas();">
<h1>Mobile-Web-App: HTML5 canvas - Text</h1>
<canvas id="mycanvas" style="border: 5px solid;" width="450" height="250">
Sorry! Your browser doesn't support Canvas.
</canvas>
</body>
</html>
No comments:
Post a Comment