Canvas(1)之HelloWorld

/*
1.要使用canvas必须先设置其width和height属性
2.接着获取绘制上下文，并指定能力，为2D还是3D
3.绘制方式有填充和描边两种方式，即
fillStyle 填充属性      fillRect()
strokeStyle  描边属性    strokeRect()

*/
var drawing = document.getElementById('drawing');
if(drawing.getContext){
//获取绘图的上下文
var context  = drawing.getContext('2d');

//绘制红色矩形
context.fillStyle = '#ff0000';
context.fillRect(10,10,50,50);

//绘制半透明的矩形
context.fillStyle = 'rgba(0,0,255,0.5)';
context.fillRect(30,30,50,50);

//在两个矩形重叠的地方清除一个小矩形, 即使这块矩形变成透明
context.clearRect(40,40,10,10);

//获取图像的数据URI,参数为图像的MIME类型，默认为png格式
var imgURI = drawing.toDataURL('imge/png');

//显示对象
var image = document.createElement('img');
image.src = imgURI;
document.body.appendChild(image);
}