初步学习HTML5----练习

leo_818

浏览: 37315 次
性别:
来自: 大连

最近访客更多访客>>

ss568567062

huangdj

code3lave

果金前端

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML5

HTML5 JavaScript C C++C#

<!DOCTYPE HTML>
<html>
<body>

<canvas id="arcCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
	Your browser does not support the canvas element.
</canvas>

<canvas id="lineCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
	Your browser does not support the canvas element.
</canvas>

<canvas id="grdCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
	Your browser does not support the canvas element.
</canvas>

<canvas id="imageCanvas" width="80" height="175" style="border:1px solid #c3c3c3;">
	Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">
	var c=document.getElementById("arcCanvas");
	var cxt=c.getContext("2d");
	cxt.fillStyle="#FF0000";
	cxt.beginPath();
	cxt.arc(70,18,15,0,Math.PI*2,true);
	cxt.closePath();
	cxt.fill();
</script>

<script type="text/javascript">
	var c=document.getElementById("lineCanvas");
	var cxt=c.getContext("2d");
	cxt.moveTo(10,10);
	cxt.lineTo(150,50);
	cxt.lineTo(10,50);
	cxt.stroke();
</script>

<script type="text/javascript">
	var c=document.getElementById("grdCanvas");
	var cxt=c.getContext("2d");
	var grd=cxt.createLinearGradient(0,0,175,50);
	grd.addColorStop(0,"#FF0000");
	grd.addColorStop(1,"#00FF00");
	cxt.fillStyle=grd;
	cxt.fillRect(0,0,175,50);
</script>

<script type="text/javascript">
	var c=document.getElementById("imageCanvas");
	var cxt=c.getContext("2d");
	var img=new Image()
	img.src="flower.jpg"
	cxt.drawImage(img,0,0);
</script>

<br>
<br>
<br>localStorage 
<br>
<script type="text/javascript">
	localStorage.lastname="Smith";
	document.write(localStorage.lastname);
</script>

<br>
<br>
<script type="text/javascript">
	if (localStorage.pagecount)
	{
	  localStorage.pagecount=Number(localStorage.pagecount) +1;
	}
	else
	{
	  localStorage.pagecount=1;
	}
	document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>

<form action="/example/html5/demo_form.asp" method="get">
	E-mail: <input type="email" name="user_email" /><br />
	Homepage: <input type="url" name="user_url" /><br />
	Points: <input type="number" name="points" min="1" max="10" /><br />
	Points: <input type="range" name="points" min="1" max="10" /><br />
	
	Date: <input type="date" name="user_date" /><br />
	Month: <input type="month" name="user_date" /><br />
	Week: <input type="week" name="user_date" /><br />
	Time: <input type="time" name="user_date" /><br />
	Date and time: <input type="datetime" name="user_date" /><br />
	Date and time: <input type="datetime-local" name="user_date" /><br />
	
	
	Webpage: <input type="url" list="url_list" name="link" />
	<datalist id="url_list">
		<option label="W3School" value="http://www.w3school.com.cn" />
		<option label="Google" value="http://www.google.com" />
		<option label="Microsoft" value="http://www.microsoft.com" />
	</datalist>
	<input type="submit" />
</form>
</body>
</html>

分享到：

用CSS3画的机器猫 | 初步学习HTML5（一）----简介

2011-04-15 16:29
浏览 1110
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

初步学习HTML5----练习

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

初步学习HTML5----练习

评论

发表评论

相关推荐

初步学习HTML5（三）----音频

初步学习HTML5(二)----视频

初步学习HTML5（一）----简介

最近访客更多访客>>