Steps to developing Metro style apps 第一章-Creat a UI（2）(5)
这时本节的最后一讲。
页面中还可以添加 以上4种元素。
下面演示添加 一个简单的 canvas
代码如下：
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <meta charset="utf-8">
5: <title>NavApp</title>
6: <!-- WinJS references -->
7: <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
8: <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
9: <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
10: <script type="text/javascript" src="jquery-1.7.2.js"></script>
11: <script type="text/javascript">
12:
13: $(function () {
14:
15: WinJS.UI.processAll().then(function () {
16: var c = document.getElementById("sss");
17: var s = c.getContext('2d');
18: s.fillStyle = "red";
19: s.fillRect(0, 0, 100, 100);
20: })
21: })
22: </script>
23: </head>
24: <body>
25: <canvas id="sss"></canvas>
26: </body>
27: </html>
下面 用 canvas画一个渐变：
代码如下：
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <meta charset="utf-8">
5: <title>NavApp</title>
6: <!-- WinJS references -->
7: <link href="//Microsoft.WinJS.0.6/css/ui-light.css" rel="stylesheet">
8: <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
9: <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
10: <script type="text/javascript" src="jquery-1.7.2.js"></script>
11: <script type="text/javascript">
12:
13: $(function () {
14:
15: WinJS.UI.processAll().then(function () {
16: var c = document.getElementById("sss");
17: var ctx = c.getContext("2d");
18: var grd = ctx.createLinearGradient(0, 0, 175, 50);
19: grd.addColorStop(0, "#FF0000");
20: grd.addColorStop(1, "#00FF00");
21: ctx.fillStyle = grd;
22: ctx.fillRect(0, 0, 175, 50);
23: })
24: })
25: </script>
26: </head>
27: <body>
28: <canvas id="sss" style="height: 500px;width: 800px;"></canvas>
29: </body>
30: </html>
