虽然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的拖拽功能,供参考。