本文主要是介绍Canvas(1)之HelloWorld，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
/*1.要使用canvas必须先设置其width和height属性2.接着获取绘制上下文，并指定能力，为2D还是3D3.绘制方式有填充和描边两种方式，即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);}这篇关于Canvas(1)之HelloWorld的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
