HTML5 Canvas初窥

在经过了Css3的学习后，相信我们能够更容易的理解HTML5的Canvas画布，如果您还没有学习Css3而又对此感兴趣，请移步我的博客Css3系列，在今后的日子里，我们一起来学习一下HTML5的Canvas画布，领略它的神奇！Canvas元素是HTML5中新增的一个重要元素，专门用来绘制图形。在页面上放置一个canvas元素就相当于在页面上放置了一块“画布”，可以在其中进行图形的描绘。

Canvas的绘制需要通过JS编写在其中进行绘画的脚本。

<canvas>看起来很像<img>，唯一不同就是它不含 src 和 alt 属性。

它只有两个属性，width 和 height，两个都是可选的，并且都可以 DOM 或者 CSS 来设置。

如果不指定width 和 height，默认的是宽300像素，高150像素。

虽然可以通过 CSS 来调整canvas的大小，但渲染图像会缩放来适应布局的。

结束标签 </canvas> 是必须的。

我们来看一下代码：

定义和用法

getContext() 方法返回一个用于在画布上绘图的环境。

语法

Canvas.getContext(contextID)

参数

参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 “2d”，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。

提示：在未来，如果 <canvas> 标签扩展到支持 3D 绘图，getContext() 方法可能允许传递一个 “3d” 字符串参数。（即现在不仅能支持“2D”）。

返回值

一个 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内容敬请关注前端攻城记博客