虽然HTML5应用已经有一段时间了，且是当前的热门前段技术，但是LZ本人却一直都未涉猎，最近项目组中使用了百度的Echarts插件，用来绘制和展示地图数据，感觉效果还是很不错的。因此在业余时间，自己开始学习html5语言，总体上html5新标签变化力度并不大，这方面的使用不做赘述。比较大的改动主要在实现了Canvas绘图以及前端存储，前端存储部分LZ尚未学习，所以本次只简单介绍下绘图的学习，Canvas据说可以达到像素级，自己试验效果确实不错，不过对于LZ项目中主流的IE浏览器来说，目前只支持IE9+版本，确实还是蛮遗憾的，火狐谷歌版本支持较好。
如下为LZ测试代码片段，包括矩形，圆，三角形，组合图形，渐变和图形变换等基本图形的绘制：
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.6.1.js" type="text/javascript"></script>
<!--[if lt IE 9]>
<script type="text/javascript">
var e=("article,footer,header,nav,section").split();
for(var i=0;i<e.length;i++){
document.createElement(e[i]);
}
</script>
<![endif]-->
<script type="text/javascript">
$(function()
{
var tCanvas = document.getElementById("canvasOne");
var ct = tCanvas.getContext("2d");
ct.beginPath(); //开始绘制路线
//圆
ct.strokeStyle = "red";
ct.lineWidth = 1;
ct.arc(50, 100, 30, 0, 2*Math.PI, false); //full circle
ct.moveTo(180,100);
ct.arc(150, 100, 30, 0, 3*Math.PI/4, false); //1/4 circle
ct.moveTo(280,100);
ct.arc(250, 100, 30, 0, Math.PI/2, true); //3/4 circle
//矩形
ct.fillRect(50,200,40,40); //实心矩形
ct.strokeRect(150,200,40,40); //边框矩形
ct.clearRect(60,210,15,15); //清除矩形
//三角形
ct.moveTo(50,400);
ct.lineTo(50,480);
ct.lineTo(130,400);
ct.stroke();
ct.closePath(); //结束绘制路线
//文字
ct.fillStyle="red";
ct.strokeStyle="red";
ct.font = "30px 微软雅黑";
ct.fillText('1223',50,300);
ct.strokeText('Hello World!!!',150,300);
//复杂图形
ct.moveTo(350,0);
ct.lineTo(400,0);
ct.arc(400,50,50,Math.PI/2*3,0,false);
ct.lineTo(400,100);
ct.lineTo(350,100);
ct.lineTo(350,0);
//ct.fill(); //填充
//渐变
//createLinearGradient(xStart, yStart, xEnd, yEnd)。
var gr = ct.createLinearGradient(0, 0, 0, 100);
//Add the color stops.
gr.addColorStop(0,'black');
gr.addColorStop(1,'white');
//Use the gradient for the fillStyle.
ct.fillStyle = gr;
//fillRect(x, y, width, height);
ct.fillRect(450, 0, 100, 100);
ct.stroke();
ct.closePath(); //结束绘制路线
//变换
ct.translate(150,550);
for (var i=1;i<6;i++)
{
// Loop through rings (in to out)
ct.save();//push stack
ct.fillStyle = 'rgb('+(255-51*i)+','+(51*i)+',0)';
for (var j=0;j<i*6;j++){
// draw individual dots
ct.rotate(Math.PI*2/(i*6));
ct.beginPath();
ct.arc(0,i*25,10,0,Math.PI*2,true);
ct.fill();
}
ct.restore();//pop stack
}
});
</script>
</head>
<body>
<canvas id="canvasOne" width="700" height="700"></canvas>
</body>
<html>
附件是使用html5搞了两个小样例，一个球形碰壁反弹，一个是html5的拖拽功能，供参考。