Элемент <canvas> ("холст") HTML5 используется для создания графики, на лету, с помощью сценариев (обычно JavaScript). Элемент
<canvas> только контейнер для графики. Вы должны использовать сценарий, чтобы рисовать графики.
"Холст" имеет несколько методов для рисования линий, полигонов, кругов, текста и добавления изображений. Разработан простой модуль для отображения
графиков. Код ниже.
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas1"
width="800" height="600"></canvas>
<script type="text/javascript">
//простой модуль для рисования
графиков на "холсте"
if (typeof GRAPHIX == "undefined") {
GRAPHIX = {
PADDING: 20, //отступ
AX_BG: "#000000", //фон
AX_CL: "#00FF00", //цвет осей
//залить фон, нарисовать оси
drawAxes:
function(canvas) {
var cnv = document.getElementById(canvas);
var w = cnv.width;
var h = cnv.height;
var ctx = cnv.getContext('2d');
ctx.fillStyle = this.AX_BG;
ctx.fillRect(0, 0, w, h);
ctx.strokeStyle = this.AX_CL;
ctx.lineWidth = 1;
//ctx.beginPath();
ctx.moveTo(this.PADDING,
0);
ctx.lineTo(this.PADDING, h);
ctx.stroke();
ctx.moveTo(0, h - this.PADDING);
ctx.lineTo(w, h - this.PADDING);
ctx.stroke();
},
//отобразить данные
drawData: function(canvas,
data, opt) {
var cnv = document.getElementById(canvas);
var w = cnv.width - this.PADDING;
var h =
cnv.height - this.PADDING;
var x0 = opt.x0;
var x1 = opt.x1;
var y0 = opt.y0;
var y1 =
opt.y1;
var dx = (x1 - x0);
var dy = (y1 - y0);
var ctx = cnv.getContext('2d');
ctx.lineWidth = 1;
ctx.strokeStyle = opt.color;
ctx.fillStyle = opt.color;
ctx.beginPath();
for (var i = 0; i < data.length; i++) {
var r = data[i];
var x = r[0];
var y = r
[1];
var l = w * (x - x0) / dx + this.PADDING;
var m = h - h * (y - y0) / dy - this.PADDING;
if (opt.style == "dots") {
ctx.fillRect(l, m, 4, 4);
}
else if (opt.style ==
"hist") {
ctx.moveTo(l, h);
ctx.lineTo(l, m);
ctx.stroke();
}
else if (opt.style == "line") {
if (i == 0) ctx.moveTo(l, h);
else
{
ctx.lineTo(l, m);
}
}
}
if (opt.style ==
"line") ctx.stroke();
},
//отобразить текст
drawTile: function(canvas, title, x, y, color, size) {
var cnv = document.getElementById(canvas);
var ctx = cnv.getContext('2d');
ctx.fillStyle = color;
ctx.font = size + "px Verdana";
ctx.fillText(title, x, y);
}
}
}
//примеры
GRAPHIX.AX_CL = "#ffff00";
GRAPHIX.drawAxes('canvas1');
var data = [
[2, 100],
[100, 200],
[200, 100],
[300, 200],
];
var opt = { "x0": 0, "x1": 400, "y0": 0, "y1": 400, "color":
"#0000ff", "style": "hist" };
GRAPHIX.drawData('canvas1', data, opt);
//quadratic
var opt2 = {
"x0": 0, "x1": 1, "y0": 0, "y1": 1.5, "color": "#ff0000", "style": "dots" };
var data2 = new Array();
for (var j = 0; j < 100; j++) {
var t = j * 0.01;
var t2 = t * t;
data2.push(new Array(t, t *
(-t2 * t + 4 * t2 - 6 * t + 4)));
}
GRAPHIX.drawData('canvas1', data2, opt2);
//cubic
var opt3 = { "x0": 0,
"x1": 1, "y0": 0, "y1": 1.5, "color": "#ff00ff", "style": "line" };
var data3 = new
Array();
for (var j = 0; j < 100; j++) {
var t = j * 0.01;
var t2 = t * t;
data3.push(new Array(t, t * (4 * t * t - 9 * t
+ 6)));
}
GRAPHIX.drawData('canvas1', data3, opt3);
//elastic
var opt4 = { "x0": 0, "x1": 1,
"y0": 0, "y1": 1.5, "color": "#ffffff", "style": "line" };
var data4 = new Array();
for
(var j = 0; j < 100; j++) {
var t = j * 0.01;
var t2 = t * t;
data4.push(new Array(t, t * (33 * t2 * t2 - 106 * t2 * t + 126 *
t2 - 67 * t + 15)));
}
GRAPHIX.drawData('canvas1', data4, opt4);
GRAPHIX.drawTile('canvas1', "elastic", 40, 40,
"#ffffff", 30);
</script>
</body>
</html>
Пример работы.
