|
今日在做实训任务的时候要求使用canvas来实现某地一到十二月份的降水量与蒸发量的柱状图，找了很多资料也没有找到自己想要的，后来终于功夫不负有心人找到了一个可以看懂的Demo，改了改终于实现了要求的结果 样图： 
代码实例： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="1200" height="600"></canvas>
</body>
<script>
var ocanvas = document.getElementById("canvas");
var mycanvas = ocanvas.getContext("2d");
var arr = [
{number1:2,number2:2.6},
{number1:4.9, number2:5.9},
{number1:7, number2:9},
{number1:23.2, number2:26.4},
{ number1:25.6, number2:28.7},
{ number1:70.7,number2:76.7},
{ number1:135.6,number2:175.6},
{number1:162.2, number2:182.2},
{ number1:32.6, number2:48.7},
{number1:20, number2:18.8},
{number1:6.4, number2:6},
{number1:3.3, number2:2.3}
];
//第一先定义一个画线的函数方法 画两条线
function line(aX,aY,bX,bY) {//开始和结束的横坐标 开始和结束的纵坐标
mycanvas.beginPath();
mycanvas.moveTo(aX,aY);
mycanvas.lineTo(bX,bY);
mycanvas.stroke();
}
line(300,80,300,480);
//第二用for循环 画11条线 利用上面line的画线方法
for(var i=0;i<11;i++){
write(200-i*20,280,80+i*40);
}
for(var i=10;i>9;i--){
line(300,80+i*40,1000,80+i*40);
}
//第三定义一个矩形的函数方法
function rect(X,Y,width,height) {
mycanvas.beginPath();
mycanvas.fillStyle="#abcdef";
mycanvas.rect(X,Y,width,height);
mycanvas.fill();
mycanvas.closePath()
}
function rect2(X,Y,width,height) {
mycanvas.beginPath();
mycanvas.fillStyle="#ef8aaa";
mycanvas.rect(X,Y,width,height);
mycanvas.fill();
mycanvas.closePath()
}
//第四定义一个方法 定义矩形的具体变量以及高引入数组
function wenrect1() {
for(var i=0;i<12;i++){
var width=20;
var height=arr[i].number2*2;
var X=310+i*40+i*10;
var Y=480-height;
rect(X,Y,width,height);
write((i+1)+"月",320+i*40+i*10,500)
}
}
wenrect1();
function wenrect2() {
for(var i=0;i<12;i++){
var width=20;
var height=arr[i].number1*2;
var X=332+i*40+i*10;
var Y=480-height;
rect2(X,Y,width,height);
}
}
wenrect2();
//添加字
function write(start,ox,oy) {
mycanvas.beginPath();
mycanvas.fillStyle = "black";
mycanvas.fillText(start,ox,oy);
mycanvas.closePath();
}
mycanvas.font="20px Arial";
mycanvas.fillStyle = "black";
mycanvas.fillText("1-12月份某地降水量及蒸发量的直方图",450,550);
mycanvas.fillStyle="#ef8aaa";
mycanvas.fillRect(800,120,20,20);
mycanvas.font="15px Arial";
mycanvas.fillText("precipitation",830, 130);
mycanvas.fillStyle="#abcdef";
mycanvas.fillRect(800,90,20,20);
mycanvas.font="15px Arial";
mycanvas.fillText("evaporation",830, 100);
mycanvas.restore();
</script>
</html>
|
转播
