HTML5初学小试

浏览数：50 / 时间：2015年06月09日

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

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

HTML5初学小试

标签： html5html5