实例1：如何通过 canvas 元素来显示一个红色的矩形

HTML：

  <canvas id="myCanvas"></canvas>

JS：

<script type="text/javascript">
  var canvas=document.getElementById('myCanvas');
  var ctx=canvas.getContext('2d');
  ctx.fillStyle='#FF0000';
  ctx.fillRect(0,0,80,100);
</script>

绘画API

坐标

实例1中的的 fillRect(0,0,80,100) 方法拥有参数(0,0,80,100)
意思是：在画布上绘制 80x100 的矩形，从左上角开始 (0,0)
fillRect (x,y,width,height)

简介

Canvas是为了客户端矢量图形而设计的。它自己没有绘图能力，所有的绘制工作必须使用 JavaScript 来完成，使用JS把想绘制的东西都绘制到一块画布上。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

<canvas> 的历史

<canvas> 标记由 Apple 在 Safari 1.3 Web 浏览器中引入。对 HTML 的这一根本扩展的原因在于，HTML 在 Safari 中的绘图能力也为 Mac OS X 桌面的 Dashboard 组件所使用，并且 Apple 希望有一种方式在 Dashboard 中支持脚本化的图形。

<canvas> 的标准化的努力由一个 Web 浏览器厂商的非正式协会在推进，目前 <canvas> 已经成为 HTML 5 草案中一个正式的标签。 参见：http://www.whatwg.org/specs/web-apps/current-work/