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);  }