当前位置： 移动技术网 > IT编程>网页制作>Html5 > 写个一个简单的canvas图表

写个一个简单的canvas图表

2018年09月13日  | 移动技术网IT编程  | 我要评论

揭中美地下核试验:炸出百米深大坑,神道天罚,魏民洲之子魏山

<!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>

 

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网