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();//對矩形進行填充

通過數(shù)據(jù)用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);