HTML5初学小试
虽然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的拖拽功能,供参考。
相关推荐
wusiye 2020-10-23
表格的现在还是较为常用的一种标签,但不是用来布局,常见处理、显示表格式数据。在HTML网页中,要想创建表格,就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
gufudhn 2020-08-09
nercon 2020-08-01
swiftwwj 2020-07-21
nercon 2020-07-16
饮马天涯 2020-07-05
Lophole 2020-06-28
gufudhn 2020-06-12
csstpeixun 2020-06-11
huzijia 2020-06-09
WebVincent 2020-06-06
行吟阁 2020-05-30
qsdnet我想学编程 2020-05-26
gufudhn 2020-05-25
qsdnet我想学编程 2020-05-19
suixinsuoyu 2020-05-15
HSdiana 2020-05-15
PioneerFan 2020-05-15