canvas-rect

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