第一步：创建一个要使用Silverlight的网页文件：lss.htm，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>用Silverlight显示多边形</title>
<script type="text/javascript" src=Silverlight.js></script>
<script type="text/javascript" src=lss.htm.js></script>
<script type="text/javascript" src=lss.xaml.js></script>
</head>
<body>
<div id="SilverlightHost">
<script type="text/javascript">
createSilverlight();
</script>
</div>
</body>
</html>
第二步：创建一个脚本文件lss.htm.js，用来实现createSilverlight()方法，代码如下：
function createSilverlight()
{
Silverlight.createObjectEx({
source:'lss.xaml',
parentElement:document.getElementById('SilverlightHost'),
id:'SilverlightHost',
properties:{
width:'400',
height:'500',
background:'lightgreen',
isWindowless:'false',
version:'1.0'
},
events:{
},
context:null
});
}
if(!window.Silverlight)
{
window.Silverlight = {};
}
Silverlight.createDelegate = function(instance,method){
return function(){
return method.apply(instance,arguments);
}
}
第三步：创建一个xmal文件lss.xaml，用来显示Silverlight内容。
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas x:Name="shape">
<!--Rectangle-->
<Rectangle Width="100" Height="100" Canvas.Left="20" Canvas.Top="20" Fill="Orange" />
<Rectangle Width="100" Height="100" Canvas.Left="140" Canvas.Top="20" Fill="Orange" Stroke="Blue" StrokeThickness="10" />
<!--Ellipse 1-->
<Ellipse Width="60" Height="60" Canvas.Left="20" Canvas.Top="130" Fill="Red"></Ellipse>
<!--Ellipse 2-->
<Ellipse Width="100" Height="60" Canvas.Left="120" Canvas.Top="130" Stroke="Blue" StrokeThickness="2" Fill="Red"></Ellipse>
<!--Ellipse 3-->
<Ellipse Width="60" Height="100" Canvas.Left="250" Canvas.Top="130" Stroke="Blue" StrokeThickness="5" Fill="Red"></Ellipse>
<!--Line 1-->
<Line Canvas.Left="20" Canvas.Top="250" X1="0" Y1="0" X2="60" Y2="10" Stroke="red" StrokeThickness="1"></Line>
<!--Line 2-->
<Line Canvas.Left="20" Canvas.Top="270" X1="100" Y1="10" X2="300" Y2="10" Stroke="Blue" StrokeThickness="5"></Line>
<!--Line 3-->
<Line Canvas.Left="20" Canvas.Top="290" X1="100" Y1="10" X2="300" Y2="10"
Stroke="Blue" StrokeThickness="10" StrokeStartLineCap="Triangle" StrokeEndLineCap="Round" ></Line>
<!--Polygon 1 三角形-->
<Polygon Canvas.Left="20" Canvas.Top="320" Stroke="Blue" StrokeThickness="4" Fill="LightPink" Points="0,100 50,0 100,100" ></Polygon>
<!--Polygon 2 正方形-->
<Polygon Canvas.Left="160" Canvas.Top="320" Stroke="Blue" StrokeThickness="4" Fill="LightPink" Points="0,0 100,0 100,100 0,100" ></Polygon>
<!--Polygon 3 多边形-->
<Polygon Canvas.Left="280" Canvas.Top="320" Stroke="Blue" StrokeThickness="4" Fill="LightPink" Points="0,30 40,0 80,30 65,80 15,80" ></Polygon>
</Canvas>
</Canvas>
如果在lss.xaml文件中需要后台代码实现功能，还要创建一个lss.xaml.js文件，用来实现lss.xaml的逻辑功能。
