canvas是html5的新标签。下面是w3c的介绍：
这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
canvas 标记由 Apple 在 Safari 1.3 Web 浏览器中引入。对 HTML 的这一根本扩展的原因在于，HTML 在 Safari 中的绘图能力也为 Mac OS X 桌面的 Dashboard 组件所使用，并且 Apple 希望有一种方式在 Dashboard 中支持脚本化的图形。
Firefox 1.5 和 Opera 9 都跟随了 Safari 的引领。这两个浏览器都支持 canvas 标记。
我们甚至可以在 IE 中使用 canvas 标记，并在 IE 的 VML 支持的基础上用开源的 JavaScript 代码（由 Google 发起）来构建兼容性的画布。 参见：http://excanvas.sourceforge.net/。
canvas 的标准化的努力由一个 Web 浏览器厂商的非正式协会在推进，目前 canvas 已经成为 HTML 5 草案中一个正式的标签。 参见：http://www.whatwg.org/specs/web-apps/current-work/
下面给大家举个简单的例子：
<!DOCTYPE HTML>
<html>
<body>
<!-- 下面是一个canvas标签,如果你的浏览器不支持该标签，就会把里面的内容输出 -->
<canvas id="myCanvas" width="300" height="300">
your browser does not support the canvas tag.
</canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas'); //获取到我们的canvas的dom对象。
var ctx = canvas.getContext('2d'); //获取到canvas的绘制上下文，可以理解为画笔。
ctx.fillStyle = '#FF0000'; //设置填充颜色（红色）
ctx.fillRect(0,0,80,100); //画一个方形，起始点在0，0（左上角），宽度为80，高度为100
</script>
</body>
</html>
我们会看到一个如下的结果。
在canvas上画一个红色的矩形
是不是很简单？下面我们画一个空心的矩形。
学会了这个之后我们就可以做一个简单的例子，做一个《贪吃蛇》的游戏。老师将带各位小朋友手把手的写出来。大家仔细看代码里面的注释讲解。
<!DOCTYPE HTML>
<html>
<head>
<style>
/* 为了让大家看清楚画布，我把body设置成灰色，canvas设置成白色 */
body{background:#eeeeee;}
canvas{background:#ffffff;}
</style>
</head>
<body>
<!-- 画布大小设置为300x300的正方形 -->
<canvas id="myCanvas" width="300" height="300">
your browser does not support the canvas tag .
</canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas'); //获取canvas的画布
var ctx = canvas.getContext('2d'); //拿到绘制的上下文，下面都成为画笔
ctx.beginPath(); //调用开始绘制的方法。绘制点线需要
ctx.strokeStyle = '#000000'; //设置画笔的颜色为黑色 ，画线和边框的颜色
ctx.rect(5 , 5 , 50 , 50); //在坐标为 5 ， 5 的地方画一个大小为50x50的空心矩形，边框颜色为黑色
ctx.stroke(); //执行画
</script>
</body>
</html>
执行结果如下：
绘制一个空心矩形
下一章节，我们会用这个空心方形作为 《贪吃蛇》中蛇的身体，和食物。因为实心的矩形不容易看出蛇的长度，本章就到此结束，good拜。
网友评论