HTML5中关于Canvas的Javascript使用

// "canvas"是HTML中的canvas的id名称
var cav = document.getElementById("canvas");
cav.width = 600; // 也可以在HTML的canvas标签中直接设置width和height属性
cav.height = 600;
// 返回一个表示用来绘制的环境类型的环境。其本意是要为不同的绘制类型（2 维、3 维）提供不同的环境。当前，唯一支持的是 "2d"，它返回一个 CanvasRenderingContext2D 对象，该对象实现了一个画布所使用的大多数方法。
var cxt = cav.getContent("2d");
// 设置画笔的起点坐标
cxt.moveTo(10,10);
// 设置画到某点坐标，但还没有开始画
cxt.lineTo(150,50);
cxt.linetTo(10,50);
// 线条颜色
cxt.strokeyStyle="red";
// 开始根据前面的设置画图
cxt.stroke();

// 画实心矩形
cxt.fillStyle="red";
cxt.fillRect(100,100,200,40);

// 画实心圆
cxt.beginPath();
cxt.moveTo(60,60);
// cxt.arc(圆心X坐标，圆心Y坐标，半径，开始角度，结束角度);
cxt.arc(60,60,50,0,60*Math.PI/180); // 角度为60度的扇形圆
cxt.fill();

// 画空心圆
cxt.beginPath();
cxt.arc(160,160,50,0,60*Math.PI/180); 
cxt.closePath(); // 空心必须加上closePath，绘图回到起点封闭图形，不然不是一个闭合图形
cxt.stroke();

// 画弧形
cxt.arc(200,200,50,0,60*Math.PI/180); // 角度为60度的弧
cxt.stroke();

// 画空心圆 + 实心圆
cxt.beginPath();
cxt.arc(60,60,50,0,360);
cxt.fillStyle="red";
cxt.fill();
cxt.strokeStyle="blue";
cxt.lineWidth=5; // 加粗线
cxt.stroke();
cxt.closePath();

// 画文字
cxt.fillText("Hello World", 70,320);
// 坐标