如何用js绘制数学函数？

<!doctype html>
<html>
<head>
<style type="text/css">
body {
text-align: center;
}
canvas {
border: 2px solid #ccc;
border-radius: 5px;
background-color: #eee;
}
</style>
</head>
<body>
<canvas id="canvas" width="840px" height="840px">您的浏览器不支持canvas</canvas>
</body>
</html>
<script type="text/javascript">
(function(){
var Point = function(x, y) {
this.x = !!x ? x : 0;
this.y = !!y ? y : 0;
};

var LineChart = function(ctx, w, h, p) {
this.context = ctx;
this.width = !!w ? w : 400;
this.height = !!h ? h : 400;
this.loc = !!p ? p : new Point(this.width / 2, 0);
this.xCalibCount = 5;
this.yCalibCount = 5;
};

LineChart.prototype = {
init: function() {
this.drawAxis();
this.drawCalibration();
},
drawAxis: function() {
this.context.lineWidth = 0.5;
this.context.lineJoin = "round";
//this.context.beginPath();
this.context.moveTo(this.loc.x, this.loc.y);
this.context.lineTo(this.loc.x, this.loc.y + this.height);
this.context.lineTo(this.loc.x + this.width, this.loc.y + this.height);
//this.context.closePath();
this.context.stroke();

this.context.beginPath();
this.context.moveTo(this.loc.x - 5, this.loc.y);
this.context.lineTo(this.loc.x + 5, this.loc.y);
this.context.lineTo(this.loc.x, this.loc.y - 10);
this.context.closePath();
this.context.fill();

this.context.beginPath();
this.context.moveTo(this.loc.x + this.width, this.loc.y + this.height - 5);
this.context.lineTo(this.loc.x + this.width, this.loc.y + this.height + 5);
this.context.lineTo(this.loc.x + this.width + 10, this.loc.y + this.height);
this.context.closePath();
this.context.fill();
},
drawCalibration: function() {
this.xCalibLength = this.width / this.xCalibCount;
this.yCalibLength = this.height / this.yCalibCount;

for (var i = 0; i <= this.xCalibCount; i++) {
this.context.moveTo(this.loc.x + i * this.xCalibLength, this.loc.y + this.height);
this.context.lineTo(this.loc.x + i * this.xCalibLength, this.loc.y + this.height + 5);
this.context.fillText(i * 20, this.loc.x +i * this.xCalibLength - 5, this.loc.y + this.height + 20);
}

for (var i = 0; i <= this.yCalibCount; i++) {
this.context.moveTo(this.loc.x, this.loc.y + this.height - i * this.yCalibLength);
this.context.lineTo(this.loc.x - 5, this.loc.y + this.height - i * this.yCalibLength);
this.context.fillText(i * 20, this.loc.x - 20, this.loc.y + this.height - i * this.yCalibLength + 5);
}

this.context.stroke();
}
};

var chart = new LineChart(document.getElementById("canvas").getContext("2d"), 400, 400, new Point(400, 20));
chart.init();

var context = document.getElementById("canvas").getContext("2d");
chart.context.save();
chart.context.strokeStyle = "red";

chart.context.beginPath();
chart.context.moveTo(20, 20);
chart.context.lineTo(70, 20);
chart.context.fillText("y=700/x", 75, 23);
chart.context.stroke();

chart.context.beginPath();
chart.context.moveTo(chart.loc.x + 1 / 20 * chart.xCalibLength, chart.loc.y + chart.height - 700 / 1 / 20 * chart.yCalibLength);
for (var i = 2; i <= 80; i++) {
chart.context.lineTo(chart.loc.x + i / 20 * chart.xCalibLength, chart.loc.y + chart.height - 700 / i / 20 * chart.yCalibLength);
}
chart.context.stroke();
chart.context.restore();

chart.context.save();
chart.context.strokeStyle = "green";

chart.context.beginPath();
chart.context.moveTo(20, 50);
chart.context.lineTo(70, 50);
chart.context.fillText("y=3000/x", 75, 53);
chart.context.stroke();

chart.context.beginPath();
chart.context.moveTo(chart.loc.x + 1 / 20 * chart.xCalibLength, chart.loc.y + chart.height - 3000 / 1 / 20 * chart.yCalibLength);
for (var i = 1; i <= 80; i++) {
chart.context.lineTo(chart.loc.x + i / 20 * chart.xCalibLength, chart.loc.y + chart.height - 3000 / i / 20 * chart.yCalibLength);
}
chart.context.stroke();
chart.context.restore(); chart.context.save();
chart.context.strokeStyle = "blue";

chart.context.beginPath();
chart.context.moveTo(20, 80);
chart.context.lineTo(70, 80);
chart.context.fillText("y=3000/x", 75, 83);
chart.context.stroke();

chart.context.beginPath();
chart.context.moveTo(chart.loc.x + 1 / 20 * chart.xCalibLength, chart.loc.y + chart.height - (-60) / 1 / 20 * chart.yCalibLength);
for (var i = 1; i <= 80; i++) {
chart.context.lineTo(chart.loc.x + i / 20 * chart.xCalibLength, chart.loc.y + chart.height - (-60) / i / 20 * chart.yCalibLength);
}
chart.context.stroke();
chart.context.restore(); chart.context.save();
chart.context.strokeStyle = "yellow";

chart.context.beginPath();
chart.context.moveTo(20, 110);
chart.context.lineTo(70, 110);
chart.context.fillText("y=3000/x", 75, 113);
chart.context.stroke();

//chart.context.beginPath();
chart.context.moveTo(chart.loc.x + 1 / 20 * chart.xCalibLength, chart.loc.y + chart.height - (-600) / 1 / 20 * chart.yCalibLength);
for (var i = 1; i <= 80; i++) {
chart.context.lineTo(chart.loc.x + i / 20 * chart.xCalibLength, chart.loc.y + chart.height - (-600) / i / 20 * chart.yCalibLength);
}
chart.context.stroke();
chart.context.restore();

})();
</script>
别折腾了，用http://www.hcharts.cn/ 插件

调试易

如何用js绘制数学函数？

解决方案 »