HTML5 Canvas元素允许我们在HTML5页面的canvas区域自由绘制图形。
让我们先体验一下HTML5 Canvas。点击“绘制”按钮，它将在下面的canvas区域绘制一些图形。
您的浏览器不支持HTML5 Canvas！
在这个例子中，只显示了HTML5中的一些基本内容 在Canvas中绘制的图形。通过以下文章的介绍，您可以绘制更先进、更复杂的图形。
HTML5 Canvas元素本身就是HTML元素，在Canvas上工作的API是javascriptt API。我们将在下面的文章中逐一介绍。
声明Canvas元素
现在，让我们来看看如何在HTML页面上声明Canvas元素。
<canvas id="ex1" width="500" height="150" style="border: 1px solid #cccccc;"> 您的浏览器不支持HTML5 Canvas！ </canvas>
上面的代码声明了一个Canvas元素，宽度为500，高度为150，并设置了一个像素的灰色描边。
如果浏览器支持HTML5 Canvas元素，所以在<canvas>中文将被忽略。如果浏览器不支持HTML5 Canvas元素，这些文字将作为提示文字显示。
你可以将<canvas>你想在页面上显示的任何地方都放置元素，比如放置在一个<div>中。
在Canvas元素上绘制图形
在HTML5 在Canvas上绘制图形即时模式（immediate mode）。所谓即时模式，是指一旦在Canvas上绘制图形，Canvas将不再知道任何关于图形的信息。绘制的图形是可见的，但你不能操作它。它就像一块真正的画布。绘制图形后，只留下一些颜色（像素）。
这与Canvas和SVG相同，SVG图形可以单独操作或重新绘制。HTML5 如果你想在canvas中修改绘制的图形，你需要重新绘制一切。
想要HTML5 使用javascript在canvas中绘制各种图形。以下是绘制步骤：
-
1、等待加载页面DOM元素。
-
2、引用canvas元素。
-
3、从canvas元素中获得2D上下文（context）。
-
4、用绘制函数从2D上下文绘制图形。
以下是一个简单的例子，它遵循上述四个步骤，在canvas中绘制矩形。
<script>
// 1. 等待加载页面DOM元素。
window.onload = function() {
drawExamples();
}
function drawExamples(){
// 2. 引用canvas元素。
var canvas = document.getElementById(ex1);
// 3. 从canvas元素中获得2D上下文（context）。
var context = canvas.getContext("2d");
// 4. 用绘制函数从2D上下文绘制图形。
context.fillStyle = "#ff0000";
context.fillRect(10,10, 100,100);
}
</script>
在上述代码中，事件监控首先添加到window对象中。该事件监控函数在页面加载后执行。该函数将调用已定义的函数drawExamples()。
接着，drawExamples()函数通过document.getElementById()canvaas元素的引用方法。然后，在canvas引用中执行getContext("2d")获取2D上下文的方法。
最后，绘制函数可以用来在这个2D上下文中绘制图形。
以下是上述代码的返回结果。
您的浏览器不支持HTML5 Canvas！
