写个一个简单的canvas图表
程序员文章站
2024-01-28 14:25:46
...
<!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>
上一篇： HTML5绘图之文字旋转
下一篇： postgresql日期和时间函数