In: Computer Science
14.5 (Text Shadow) Create a shadow on the phrase "HTML5 Canvas" with an offset-x of 2px, an offset-y of 5px, a blur of 6px and a text-shadow color gray.
14.6 (Rounded Rectangle) Generalize the example in Fig. 14.7 into a roundedRect function and call it twice with different arguments to place two different rounded rectangles on the canvas.
15.7 (Nutrition Information XML Document)Create anXML document that marks up the nutrition facts for a package of Grandma White’s cookies. A package of cookies has a serving size of 1 package and the following nutritional value per serving: 260 calories, 100 fat calories, 11 grams of fat, 2 grams of saturated fat, 5 milligrams of cholesterol, 210 milligrams of sodium, 36 grams of total carbohydrates, 2 grams of fiber, 15 grams of sugars and 5 grams of protein. Name this document nutrition.xml. Load the XML document into your web browser. [Hint: Your markup should contain elements describing the product name, serving size/amount, calories, sodium, cholesterol, proteins, etc. Mark up each nutrition fact/ingredient listed above.]
15.9 (Nutrition Information XSL Style Sheet) Write an XSL style sheet for your solution to Exercise 15.7 that displays the nutritional facts in an HTML5 table.
14.5
<!doctype html>
<html>
<head>
<title>HTML5 canvas</title>
<script type="application/javascript">
function init() {
var canvas = document.getElementById("canvas");
if (canvas.getContext)
{
var ctx = canvas.getContext("2d");
//Specify the text alignment
ctx.textAlign="start";
// Specify the font size and font type.
ctx.font = "25px verdana";
// Specify the shadow colour.
ctx.shadowColor = "gray";
// Specify the shadow offset.
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 5;
// Display the text with only shadow.
ctx.fillText("HTML5 canvas", 100,20);
// Blur the shadow to create a blur effect.
ctx.shadowBlur = 6;
}
}
</script>
</head>
<body onload="init();">
<canvas id="canvas" width="900"
height="500"></canvas><br>
</body>
</html>
15.7
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="nutrition.xsl"?>
<!--Marking up documents-->
<whitescookie>
<productname>Grandma White's
Cookies</productname>
<serving>1 package</serving>
<calories>260 calories</calories>
<fatcals>100 fat calories</fatcals>
<fat>11 g of fat</fat>
<saturatedfat>2 g of saturated fat</saturatedfat>
<cholesterol>5 mg of cholesterol</cholesterol>
<sodium>210 mg of sodium</sodium>
<carbohydrates>36 g of carbs</carbohydrates>
<fiber>2 g of fiber</fiber>
<sugar>15 g of sugar</sugar>
<protein>5 g of protein</protein>
</whitescookie>