02. canvas 绘制图形基本步骤

渲染上下文

canvas 元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容，
canvas 元素有一个叫做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

绘图 Api

可以将 canvas 分为几类：

1. 矩形;
2. 路径;
3. 样式相关的 Api.

一个简单的例子：

// 获取渲染上下文
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// 绘制一个填充色为 rgb(200,0,0) 的矩形
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);