<html>
<head>
</head>
<p>Use HTML5 Canvas Element </p>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<canvas id="myCanvas1" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<canvas id="myCanvas2" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
</br>
<p> Use THML5 SVG Element </p>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" />
</svg>
</br>
<p> Use SVG File in THML(use iframe element)</p>
</br>
<iframe src="svgFile/rect3.svg" width="300" height="300">
</iframe>
<iframe src="svgFile/circle1.svg" width="200" height="100">
</iframe>
<iframe src="svgFile/ellipse2.svg" width="500" height="200">
</iframe>
<iframe src="svgFile/linear1.svg" width="400" height="400">
</iframe>
<iframe src="svgFile/polygon2.svg" width="400" height="400">
</iframe>
<script type="text/javascript">
var c=document.getElementById("myCanvas2");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
<script type="text/javascript">
var c=document.getElementById("myCanvas1");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
<!--frameset framespacing=0 border=1 rows="60,*">
<frame name="top" src="report/top.xml" scrolling=no noresize>
<frame name="content" src="report/summary.xml" noresize>
</frameset>
</frameset-->
</html>
运行结果：
