canvas - 柱子效果

最新推荐文章于 2024-03-11 09:16:03 发布

weixin_30596343

最新推荐文章于 2024-03-11 09:16:03 发布

阅读量85

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/dhsz/p/6871948.html

版权

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
<title>canvas绘制图表</title>  
<style type="text/css">  
*{  
    margin:0;  
    padding:0;  
}  
body{  
    text-align:center;  
    background-color:black;  
}  
#c1{  
    background-color:white;  
}  
</style>  
<script type="text/javascript">  
function rnd(n,m){  
    return parseInt(Math.random()*(m-n)+n);  
}  
window.onload = function(){  
    var canvas = document.getElementById('c1');  
    var gd = canvas.getContext('2d'); 

    var aData = [100,200,300];  
    var space = 20;  
    var topSpace = 100;  

    var iMax=Math.max.apply(null,aData)  
    var w=40;  
    var lastR=0;    //前一个柱子的right  
    
    for(var i=0;i<3;i++){  
        //原点
        var l=lastR+space;  
        var t;

        //根据canvas 和 比例 来确定高, 而不是根据给出的高度    
        var h=(aData[i]/iMax)*(canvas.height-topSpace);  
         
         //原点
         t=canvas.height-h;  
        
        gd.fillStyle='rgb('+rnd(0, 256)+', '+rnd(0, 256)+', '+rnd(0, 256)+')';  
        
        gd.fillRect(l,t,w,h);  

        lastR=l+w;  
    }  
}  
</script>  
</head>  
<body>  
    <canvas width='500' height="500" id="c1"></canvas>  
</body>  
</html>