HTML5元素< canvas>为您提供了一种使用JavaScript绘制图形的简单而强大的方法.它可用于绘制图形，制作照片合成或制作简单(而不是那么简单)的动画.
这是一个简单的< canvas>元素只有两个特定属性宽度和高度加上所有核心HTML5属性，如id，name和class等.
<canvas id = "mycanvas" width = "100" height = "100"></canvas>
您可以轻松找到< canvas>使用 getElementById()方法在DOM中的元素如下 :
var canvas = document.getElementById("mycanvas");让我们看一个使用< canvas>的简单示例HTML5文档中的元素.
<!DOCTYPE HTML>
<html>
<head>
<style>
#mycanvas{border:1px solid red;}
</style>
</head>
<body>
<canvas id = "mycanvas" width = "100" height = "100"></canvas>
</body>
</html>
这将产生以下结果 :
渲染上下文
<canvas> 最初是空白的，为了显示某些东西，脚本首先需要访问渲染上下文并在其上绘制.
canvas元素有一个名为 getcontext 的DOM方法，用于获取渲染上下文及其绘图功能.此函数采用一个参数，即上下文的类型 2d .
以下是获取所需上下文的代码，并检查浏览器是否支持< canvas> element :
var canvas = document.getElementById("mycanvas");
if(canvas.getcontext){
var ctx = canvas.getcontext('2d');
//这里的绘图代码
} else {
//这里画布不支持的代码
}
浏览器支持
最新版本的Firefox，Safari，Chrome和Opera都支持HTML5 Canvas，但IE8本身不支持画布.
您可以使用 ExplorerCanvas 通过Internet Explorer获得画布支持.您只需要将此JavaScript包括如下 :
<!--[if IE]><script src = "excanvas.js"></script><![endif]-->