canvas是html5最强大的元素之一，在图形，动画和游戏开发中有许多应用。
好了，废话不多说，直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*在样式方面，值得注意的是，要给body和canvas元素不同的背景色，因为canvas元素默认和父元素具有相同的颜色，所以要分开设置背景色，方便查看我们创建的canvas元素*/
body{
background:#dddddd;
}
#first-canvas{
background: #ffffff;
margin: 10px;
padding: 10px;
border: thin inset #aaaaaa;
}
</style>
</head>
<body>
<!--下面是canvas元素的标签，值得一提的是,canvas元素里面的文字，是在当前浏览器不支持canvas的情况下才会执行-->
<canvas id="first-canvas">
该浏览器不支持canvas
</canvas>
<!--下面是我们的js代码部分，使用canvas元素来绘制图片，其实实际上是使用js来绘制，canvas只是提供一张画布-->
<script>
//获取canvas对象
var canvas = document.getElementById("first-canvas");
//通过canvas对象获取绘图环境变量，注意2d的d一定是小写的...
var context = canvas.getContext("2d");
//通过context对象设置绘制图像的样式，其中fillstyle是填充字符的样式，strokestyle是填充字符的轮廓线的样式
context.font = '38pt Arial';
context.fillStyle = 'cornflowerblue';
context.strokeStyle = 'blue';
//下面的语句是设置图片的填充字符和轮廓线，这两个函数都需要填三个参数，第一个是填充内容，剩下两个是内容的横纵坐标，相当于div盒子内边距;
context.fillText('Hello Canvas',canvas.width/2-150,
canvas.height/2+15
);
context.strokeText('Hello Canvas',canvas.width/2-150,
canvas.height/2+15
);
</script>
</body>
</html>
下面我们看看代码的效果图：
