简单示例
<!DOCTYPE html>
<html>
<head>
<style>
body{
background: #dddddd;
}
#canvas{
margin:10px;
padding:10px;
background: #ffffff;
}
</style>
</head>
<body>
<canvas id='canvas' width='600' height='300'>
Canvas not supported
</canvas>
<script type="text/javascript">
var canvas =document.getElementById('canvas');
context=canvas.getContext('2d');
context.font='38pt Arial';
context.fillStyle='cornflowerblue';
context.strokeStyle='blue';
context.fillText('Hello Valentine',canvas.width/2-150,canvas.height/2+15);
context.fillStroke('Hello Valentine',canvas.width/2-150,canvas.height/2+15);
</script>
</body>
<footer></footer>
</html>
注意：canvas默认大小为300*150像素
注意：实用width与height而非css设置canvas的大小
效果：
