最近接触了HTML5,
在网上看到一篇《玩转html5 的 canvas画图》的博客,内容很多，学习学习
uml.org.cn
http://www.uml.org.cn/html/201208224.asp
几行简单代码：
<!DOCTYPE>
<html>
<head>
<style >
#coordiv,#xydiv,#tdiv{
/*float:left;*/
width:199px;
height:99px;
border-style: solid;
border-color:#c3c3c3;
}
</style>
<script type="text/javascript">
//取得屏幕坐标
function cnvs_getCoordinates(ev) {
x=ev.clientX;
y=ev.clientY;
document.getElementById("xydiv").innerHTML="Coordinates: (" + x + "," + y + ")";
}
function cnvs_clearCoordinates(ev) {
document.getElementById("xydiv").innerHTML="";
}
</script>
</head>
<body>
<div id="coordiv" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>
<div id="xydiv"></div>
<canvas id="can1">
<script>
var c=document.getElementById("can1");
var cxt=c.getContext("2d");/*2d画面*/
cxt.moveTo(20,20);/*起始位置*//*位置相对于可用容器的，比如这个页面中canvas在两个div的下面，则20,20是相对品目左边20个像素，相对上面那个div20个像素。如果将两个div注释掉，则是相对屏幕左上角20,20个像素*/
cxt.lineTo(150,50);/*第二个点*/
cxt.lineTo(10,50);/*第三个点*/
var gnt1=cans.createLinearGradient(0,0,400,300);//线性渐变的起点
gnt1.addColorStop(,);
cxt.storeStyle="#FFAA00";/*边框颜色*/
cxt.stroke();/*绘制边框*/
</script>
</canvas>
<div id="tdiv">
</div>
<canvas id="can2">
<script>
var c2=document.getElementById("can2");
var cxt2=c2.getContext("2d");
cxt2.fillStyle="#FF0000";/*填充样式*/
cxt2.beginPath();/*填充*/
cxt2.arc(70,50,30,30,Math.PI*2,true);/*圆心(70,50)，半径30,开始角度30度,结束角度90度(Math.PI*2),逆时针(true;false为顺时针)*/
cxt2.closePath();
cxt2.fill();
</script>
</canvas>
</body>
</html>
