我正在尝试使用画布在x轴和y轴上添加标签，但是很麻烦。如果有人可以在这里提供帮助，那就太好了。
这是我到目前为止得到的：
function drawOne(a, n) {
// draws the rectangle for one of the values
// a is a counter for the column
// n is the value being graphed
con.strokeStyle = "black";
con.lineWidth = 0.5;
con.strokeRect(80 * a, 400, 25, -30*n);
// Create gradient
var gradient = con.createLinearGradient(0, 0, 0, c.width);
gradient.addColorStop(0.1, "red");
gradient.addColorStop(1, "blue");
con.fillStyle = gradient;
con.fillRect(80 * a, 400, 25, -30*n);
// write the value below the column
con.font = "20px Georgia";
con.strokeText(n, 500 + 40 * a, 440);
}
function getGraph() {
var i = 0;
var results;
var dicePoss = [0,1,2,3,4,5,6]
var finished = false;
results = document.getElementById('texts').value;
// gets input e.g 623653246325435432156545352516
var resultsArr = results.split("");
resultsArr.sort();
//supposed to split input into an array e.g 6,2,3,6,5,3,2,4,6,3,2,5 note commas are invisible and just to show they are an array
document.getElementById('x-axis').innerHTML = dicePoss;
//irrelevant to current algorithm but to be used with x-axis on graph later
freq =[0,0,0,0,0,0,0];
var canvas = document.getElementById("myCanvas");
while (!finished && i < resultsArr.length) { //while the function is not finished AND the iteration is done 30 times
if (resultsArr[i] > 0 && resultsArr[i] < 7 ) {//resultsArr[i] defines the character e.g input 2 currently being iterated in the array
freq[resultsArr[i]]++; //adds an element to the new array which is checked to meet the IF statement
i++; //iterates continuously
//commence drawing graph on IF in the while loop
var con = c.getContext("2d");
con.strokeStyle = 'pink';
for(var d=0; d < freq.length; d++)
{
drawOne(dicePoss[d], freq[d])
}
con.stroke();
document.getElementById('y-axis').innerHTML = freq; //prints on ID the value of function results
}
else {
finished = true;
}
if (finished == true){
//reject message to display in the middle of the graph
var ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Please enter a valid input between 1 - 6!", canvas.width/2, canvas.height/2);;
}
}
}
var c = document.getElementById("myCanvas");
var con = c.getContext("2d");
con.strokeStyle = 'black';
// move to the bottom left<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Six Revisions is a blog that shares useful information about web development and design, dedicated to people who build websites." />
<title>6 Sided Die Simulator</title>
<style>
canvas {
padding: 0;
margin: auto;
display: block;
width: 600px;
height: 400px;
}
</style>
</head>
<h1>Six Sided Die Simulator</h1>
<canvas id="myCanvas" width="600" height="400"style="border:1px solid #FF0000;">Canvas is not supported
</canvas>
<body>
<p id="y-axis">Frequency of die rolls(results)</p>
<p id="x-axis">Dice Possible Rolls between 1-6</p>
<input type="text" value="Enter diceroll" id="texts" style="width: 150px;" />
<br />
<input type="button" value="Display Column Graph" onclick="getGraph();">
</body>
</html>
以下是我所得到的图像：What I get
以下是我打算获得的图像：What I want
有人知道我能做到这一点吗？
