HTML5這個(gè)新一代的標(biāo)記語(yǔ)言，注定要成為Web開(kāi)發(fā)的主流工具。很多人可能認(rèn)為它只是頁(yè)面布局、樣式，其實(shí)它還有很多有趣的玩法。
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5好玩的源代碼</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
//畫一個(gè)正方形
ctx.fillRect(25,25,100,100);
//畫一條直線
ctx.moveTo(0,0);
ctx.lineTo(200,200);
ctx.stroke();
</script>
</body>
</html>如果你對(duì)設(shè)計(jì)動(dòng)畫感興趣，HTML5也能為你提供便捷的幫助。代碼如下：
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5好玩的源代碼</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'yellow';
ctx.beginPath();
ctx.moveTo(250, 75);
ctx.lineTo(323, 301);
ctx.lineTo(131, 250);
ctx.fill();
</script>
</body>
</html>除此之外，HTML5還可以實(shí)現(xiàn)一些有意思的游戲效果。
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5好玩的源代碼</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;
function drawBall() {
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBall();
if(x + dx >canvas.width-ballRadius || x + dx< ballRadius) {
dx = -dx;
}
if(y + dy >canvas.height-ballRadius || y + dy< ballRadius) {
dy = -dy;
}
x += dx;
y += dy;
}
setInterval(draw, 10);
</script>
</body>
</html>這只是HTML5帶給我們的某一方面體驗(yàn)，還有很多有趣的方面等待我們?nèi)グl(fā)掘！