<style type="text/css">
.canvas { 150px; height:150px;}
canvas { border: 1px solid black;}
</style>
<body onload="draw();">
<div class="canvas">
<canvas id="canvas" width="150" height="150">
<p>写在这里面的内容将展示给不兼容canvas的浏览器</p>
</canvas>
</div>
</body>
<script type="text/javascript">
function draw() {
canvas = document.getElementById("canvas");
if (canvas.getContext) { //检测浏览器是否兼容
ctx = canvas.getContext("2d"); //你的canvas代码在这里
}
//不兼容的代码
}
</script>
getContext() 方法返回一个用于在画布上绘图的环境。
Canvas.getContext(contextID)
参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 “2d”，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。
一个 CanvasRenderingContext2D 对象，使用它可以绘制到 Canvas 元素中。
返回一个表示用来绘制的环境类型的环境。其本意是要为不同的绘制类型（2 维、3 维）提供不同的环境。当前，唯一支持的是 "2d"，它返回一个 CanvasRenderingContext2D 对象，该对象实现了一个画布所使用的大多数方法。
好吧，我们来看一个最简单的实例，绘制一个矩形：
代码如下
[javascript]
function draw() {
canvas = document.getElementById("canvas");
if (canvas.getContext) { //检测浏览器是否兼容
ctx = canvas.getContext("2d"); //你的canvas代码在这里
ctx.fillStyle = "blue";//设置绘制颜色
ctx.fillRect(100, 100, 200, 100);//四个参数(x,y,width,height)
}
//不兼容的代码
}
[/javascript]
本文出自http://qdgcs.co.cc，更多html5内容敬请关注前端攻城记博客