当前位置:编程学习 > html/css >>

写个一个简单的canvas图表

<!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 h=(aData[i]/iMax)*(canvas.height-topSpace);  
        var 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>  

 

补充:web前端 , HTML 5 ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,