十分钟学会canvas

一句话描述：canvas是HTML5加入的用来绘制2D图像与文字的元素。

基础

简单步骤：

1. var c = document.getElementById("mycanvas");获取dom
2. var ct = c.getContext("2d");取得2D上下文
3. ct.fillStyle = "red";确定绘图方式（填充/描边）
4. ct.fillRect(0,0,50,50);确定绘图位置和大小，前两个参数表示起始点的xy坐标，后两个参数表示宽和高

绘图方式：

　　2D上下文提供两种基本的操作。

　　1.填充。fillStyle来确定，fillRect来确定位置和大小。

　　2.描边。strokeStyle来确定，strokeRect来确定位置和大小。

实例1：画一个正方形

 //带边框

//HTML中

<canvas id="mycanvas" width="200" height="200"></canvas>

//js中

var c = document.getElementById("mycanvas");
var ct = c.getContext("2d");
ct.fillStyle = "aqua";
ct.fillRect(0,0,50,50);
ct.strokeStyle = "red";
ct.strokeRect(0,0,50,50);

好，最基本的操作学会了，继续往下走。

初级：

clearRect():

　　可以用来清除画布的内容。

实例2：画两个正方形，中间部分为空

var c = document.getElementById("mycanvas");
var ct = c.getContext("2d");
ct.fillStyle = "aqua";
ct.fillRect(0, 0, 50, 50);
ct.fillStyle = "red";
ct.fillRect(30, 30, 50, 50);
ct.clearRect(30, 30, 20, 20);

注意，clearRect的其实位置是从左上角开始的。

绘制时钟

 待续。。