- <!DOCTYPE html> <html>
- <head> <meta charset="UTF-8">
- <title>HTML5 Canvas入门示例</title> </head>
- <body>
- <!-- 添加canvas标签，并加上红色边框以便于在页面上查看效果 --> <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
- 您的浏览器不支持canvas标签。 </canvas>
- </body>
- </html>
此时，我们使用支持html5的浏览器打开该页面，将会看到如下内容：
在html5中，canvas标签本身并没有任何行为，仅仅只是在页面上占用指定大小的页面空白空间。canvas标签就相当于一块空白的画布，还需要我们自己使用JavaScript提供的canvas API编写相应的代码从而在这块画布上绘制出我们想要的图形。
备注：canvas标签体内的文字内容将会在不支持html5的浏览器中显示。如上述html代码所示，如果你的浏览器不支持html5的canvas标签，那么将会在canvas标签处显示文字「您的浏览器不支持canvas标签」。
作为「画家」的我们，首先需要熟悉我们手中的画笔，也就是JavaScript中的Canvas对象及其相关内容。
在html5中，一个canvas标签就对应一个Canvas对象，我们在JavaScript可以使用document.getElementById()等常规函数来获取该对象。值得注意的是，在JavaScript中，我们并不是直接操作Canvas对象，而是通过Canvas对象来获取对应的图形绘制上下文对象CanvasRenderingContext2D，然后我们再利用CanvasRenderingContext2D对象自带的许多绘制图形的函数来绘图。
这就好像是每一张画布都对应一支画笔，要想在画布上绘画，我们就先要拿到对应的画笔，然后使用这支画笔在画布上绘图。CanvasRenderingContext2D对象就相当于这支画笔。现在，我们就先来尝试在JavaScript中拿到这支画笔。
