[size=medium][b]一.概述[/b][/size]
[size=small]
使用HTML5的canvas元素,我们可以在页面上绘制自己想要的图形,有点客户端编程时绘制图形的味道,比如C++的MFC中经常在屏幕上绘制图形。这个元素之前没有研究过,今天写了一段测试代码如下。
[/size]
[size=medium][b]二.代码[/b][/size]
[size=small]运行结果如下[/size]
[img]http://dl.iteye.com/upload/attachment/0080/9747/acc263a6-05a7-316b-96ab-eeb19cd70a52.jpg[/img]
[size=small]
使用HTML5的canvas元素,我们可以在页面上绘制自己想要的图形,有点客户端编程时绘制图形的味道,比如C++的MFC中经常在屏幕上绘制图形。这个元素之前没有研究过,今天写了一段测试代码如下。
[/size]
[size=medium][b]二.代码[/b][/size]
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,10);
cxt.lineTo(150,50);
cxt.lineTo(10, 50);
cxt.lineTo(10, 10);
cxt.fillStyle = "#f88";
cxt.fill();
cxt.stroke();
</script>
</body>
</html>
[size=small]运行结果如下[/size]
[img]http://dl.iteye.com/upload/attachment/0080/9747/acc263a6-05a7-316b-96ab-eeb19cd70a52.jpg[/img]