HTML5 canvas 初级入门教程

HTML5 canvas 即HTML5画布，是一个现代浏览器都支持的HTML5非插件绘图的功能，本文将展示如何通过HTML5 canvas API操作canvas元素、绘制图形、改变绘图颜色以及删除图形，让我们开始进入这很酷的新技术的短暂旅行吧。
canvas元素简介
使用canvas元素相当简单，它只是一个单纯的HTML标签，外加宽高两个特性。
<canvas width="500" height="500">
<!-- 在这里插入向后兼容的内容，不支持canvas的浏览器可以解析和显示 -->
</canvas>
上面的代码在页面中插入了一个透明的画布，canvas元素内部的内容可以在不支持canvas功能的浏览器下显示你想给你的用户提供的信息，联想下<noscript>元素就可以。
浏览器支持
很重要的一点就是浏览器对canvas的支持还是相当不错的，所有现代浏览器都支持它，包括最新版的IE9：
Internet Explorer 9.0+
Safari 3.0+
Firefox 3.0+
Chrome 3.0+
Opera 10.0+
iOS 1.0+
Android 1.0+
有趣的是，你可以在IE8以及更低版本的IE浏览器下使用canvas功能，借助ExplorerCanvas 插件。
画布尺寸
当定义canvas元素的尺寸时，最好通过HTML设置它的width和height特性，因为通过CSS设置宽高会导致画布按比例缩放到你设置的值，这背后有它的逻辑原因：在canvas元素的内部存在一个名为2d渲染环境（2d redering context）的对象，所以，通过CSS设置画布尺寸会引起奇怪的效果。
探索2d 渲染环境
我们上面提到的canvas元素只是canvas功能的一部分，另一部分是2d渲染环境，它可以让你实现很酷的看得到的东西。
需要完全理清的是：当你使用canvas，你不是在canvas元素上画图，事实上你是在canvas元素内部的2d渲染环境上。
坐标系统
如果你曾经使用过2d绘图编程语言（比如ActionScript、Processing等），你应该会了解基于屏幕（screen-based）的坐标系统。canvas内部的2d渲染环境并没有什么不同之处，它采用标准的笛卡尔坐标系统，原点位于屏幕左上角，向右移动会增加x坐标的值，向下移动会增加y坐标的值，很容易理解。

通常坐标系统的单位是屏幕的1像素。
操作2d渲染环境
需要利用Javascript提供的API来获取2d渲染环境对象，该方法为：getContext()，看下简单的例子：
<canvas id="csser-com-Canvas" width="500" height="500">
    <!-- 向后兼容的内容 -->
</canvas>
<script>
var canvas = document.getElementById("csser-com-Canvas");
var c = canvas.getContext("2d");
</script>
通过调用canvas对象的getContext()方法，c变量就包含了指向2d渲染环境的引用，这意味着你现在已经完成了在画布上绘图的一切准备，接下来可以开始绘图了。
本文来自：http://wjlgryx.iteye.com