canvas画矩形
var oC = document.getElementById('c1');
var gd = oC.getContext('2d');
gd.lineWidth = 20;//线宽
gd.strokeStyle = 'red';//线的颜色
gd.strokeRect(100,100,400,200);//在200,200的位置画一个宽400，高200的矩形
gd.strokeRect(矩形左上角x，矩形左上角y，矩形宽，矩形高);
还可以使用填充
gd.fillStyle = 'red';//填充的颜色
gd.fill();//对矩形进行填充
通过数据用canvas画条形图
function rnd(m,n){
return parseInt(m+Math.random()*(n-m));
}
document.addEventListener('DOMContentLoaded',function(){
var oC = document.getElementById('c1');
var gd = oC.getContext('2d');
var arr=[300,200,50,800,150,900];
//最大
var iMax = Math.max.apply(null,arr);
var aHeight = [];
for(var i = 0;i<arr.length;i++){
aHeight[i] = arr[i]/iMax*oC.height;
}
var w = oC.width/(aHeight.length*3-2);
var iSpace = w*2;
for(var i = 0;i<aHeight.length;i++){
gd.fillStyle = 'rgb('+rnd(0,256)+','+rnd(0,256)+','+rnd(0,256)+')';
gd.fillRect(i*(w+iSpace),oC.height - aHeight[i],w,aHeight[i]);
}
},false);
