<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Canvas案例</title>
</head>
<script type="text/javascript" src="script.js"></script>
<body onload="draw('canvas')">
<h1>Canvas案例</h1>
<canvas id='canvas' width="400" height="300" />
</body>
</html>
在这个页面中我们写了一个canvas元素。该元素的ID为canvas。然后链接了script.js这个文件。
//script.js
function draw(id)
{
var canvas = document.getElementById(id)
if(canvas==null){
return false
}
var context = canvas.getContext('2d')
context.fillStyle="#eeeeff"
context.fillRect(0,0,400,300)
context.fillStyle='rgba(255,0,0,0.25)'
context.translate(200,50)
createFiveStar(context)
context.fill()
}
function createFiveStar(context){
var dx = 0
var dy = 100
var s = 50
context.beginPath()
var x = Math.sin(0)
var y = Math.cos(0)
var dig = Math.PI/5*4
for(var i=0i<5i++){
var x = Math.sin(i*dig)
var y = Math.cos(i*dig)
context.lineTo(dx+x*s,dy+y*s)
}
context.closePath()
}
我们提供了两个方法一个是draw方法。当页面加载完成的时候就会执行draw方法中的内容。
而draw方法中呢又会执行createFiveStart函数。
下面我来分析下createFiveStart函数的内容：
function createFiveStar(context){
var dx = 0//画出来的五角星x偏移位置
var dy = 100//画出来的五角星y偏移位置
var s = 50//画出来的五角星的大小
context.beginPath()//开始路径绘制
var x = Math.sin(0)//默认的x坐标
var y = Math.cos(0)//默认的y坐标
var dig = Math.PI/5*4//弧度值
for(var i=0i<5i++){
var x = Math.sin(i*dig)
var y = Math.cos(i*dig)
context.lineTo(dx+x*s,dy+y*s)//划线
}
context.closePath()//结束路径
}
好了到了这里我们就完成了HTML5中，五角星的绘制。
首先先说一下HTML5的代码只是在原有的XHTML基础上增加了一些新的标签（还有一些新的特性，例如数据库和缓存等特性）
以下为此页面的结构代码：
<!doctype html><html>
<head>
<meta charset="utf-8">
<meta name="revised" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="robots" content="all" />
<title>页面标题</title>
</head>
<body>
<header>
<div></div><!--登陆注册区域-->
</header><!--头部[html5新标签]-->
<nav></nav><!--导航[html5新标签]-->
<div></div><!--banner-->
<div></div><!--左上-->
<div></div><!--右上-->
<div></div><!--左下-->
<div></div><!--右下-->
<footer></footer><!--底部[html5新标签]-->
</body>
</html>
注：以上为页面的大的框架，相对用HTML5新的标签更合理的，全用上了新的带有语义标签。
另外多说一下，[注册登陆]这块在html5的新标签里面没有很合适的语义化的标签，所以依然采用原有的div标签为最合理。html5只是在原有的技术的基础上更细化了，咱在制作代码的过程中没必要必须用HTML5的代码，主要看是否合理，合理的为较合适的。
多说的：不管用XHTML还是HTML5写代码，结构（HTML5）与样式（CSS）尽量要分离！
希望能帮到你！
