HTML5 知识库
html5初学者
阅读:931次
评论:0条
更新时间:2011-08-11
<!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 ccxt=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 ccxt=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 ccxt=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 ccxt=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>
<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 ccxt=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 ccxt=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 ccxt=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 ccxt=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>
评论 共 0 条 请登录后发表评论
您还没有登录,请您登录后再发表评论
