Canvas 如何使用Easeljs绘制完整的坐标系？

我想通过在画布上绘制来创建一个完整的坐标系

它应该类似于这样：

我的问题是，用Easeljs创建这个图像的代码是什么？请忽略标题“协调系统”和中间的红十字

我在flash中做过一次，但使用了线条工具、箭头工具、标签工具等

---

现在，将所有内容移植到HTML5，并尝试仅使用代码创建所有内容：

好吧，我不知道这是否可以称为优化代码，但它足以生成以下内容：

HTML:

Javascript:

var stage = new createjs.Stage('canvas2d');
var coord_xaxis = new createjs.Shape();
stage.addChild(coord_xaxis);
var coord_yaxis = new createjs.Shape();
stage.addChild(coord_yaxis);
var coord_arrow_x = new createjs.Shape();
stage.addChild(coord_arrow_x);
var coord_arrow_y = new createjs.Shape();
stage.addChild(coord_arrow_y);
var coord_xaxis_lines = new createjs.Shape();
stage.addChild(coord_xaxis_lines);
var coord_yaxis_lines = new createjs.Shape();
stage.addChild(coord_yaxis_lines);

var axis_center_x = $('#canvas2d').width()/2;;
var axis_center_y = $('#canvas2d').height()/2;
var xaxis_width = $('#canvas2d').width()-0.05*$('#canvas2d').width();
var yaxis_width = $('#canvas2d').height()-0.05*$('#canvas2d').height();
var axis_start_x = ($('#canvas2d').width()-xaxis_width)/2;
var axis_start_y = ($('#canvas2d').height()-yaxis_width)/2;

var axis_strokewidth = 2;
coord_xaxis.graphics.setStrokeStyle(axis_strokewidth,'round').beginStroke('#000');
coord_xaxis.graphics.moveTo(axis_start_x, axis_center_y).lineTo(axis_start_x+xaxis_width, axis_center_y);
coord_yaxis.graphics.setStrokeStyle(axis_strokewidth,'round').beginStroke('#000');
coord_yaxis.graphics.moveTo(axis_center_x, axis_start_y).lineTo(axis_center_x, axis_start_y+yaxis_width);

// draw coordsys arrow for x-axis
var arrwidth = 5;
var arrxtnd = 5;
coord_arrow_x.graphics.beginFill('#000');
coord_arrow_x.graphics.setStrokeStyle(axis_strokewidth,'round').beginStroke('#000');
coord_arrow_x.graphics.moveTo(axis_center_x, axis_start_y-arrwidth/2).lineTo(axis_center_x+arrwidth, axis_start_y+arrwidth+arrxtnd).lineTo(axis_center_x-arrwidth, axis_start_y+arrwidth+arrxtnd).lineTo(axis_center_x, axis_start_y-arrwidth/2);
coord_arrow_x.graphics.endFill();

// draw coordsys arrow for y-axis
coord_arrow_y.graphics.beginFill('#000');
coord_arrow_y.graphics.beginStroke('#000');
coord_arrow_y.graphics.moveTo(axis_start_x+xaxis_width+arrwidth/2, axis_center_y).lineTo(axis_start_x+xaxis_width-arrwidth-arrxtnd, axis_center_y+arrwidth).lineTo(axis_start_x+xaxis_width-arrwidth-arrxtnd, axis_center_y-arrwidth).lineTo(axis_start_x+xaxis_width+arrwidth/2, axis_center_y);
coord_arrow_y.graphics.endFill();

var label_x = new createjs.Text('x', 'bold 16px Arial', '#333');
var label_y = new createjs.Text('y', 'bold 16px Arial', '#333');
stage.addChild(label_x);
stage.addChild(label_y);
label_x.x = axis_start_x+xaxis_width-5;
label_x.y = axis_center_y+10;
label_y.x = axis_center_x-20;
label_y.y = axis_start_y-5;

var stepdist = xaxis_width/14;
var steplinew = 6;
// 10 horizontal lines
var xlines = 10;
var labels_x = [];
for(var i=0;i<=xlines;i++) {
    // dont overdraw x-axis-line
    if(i!=xlines/2) {
        // long gray line
        coord_yaxis_lines.graphics.setStrokeStyle(1,'round').beginStroke('#DDD');
        coord_yaxis_lines.graphics.moveTo(axis_start_x, axis_center_y+(i-xlines/2)*stepdist).lineTo(axis_start_x+xaxis_width, axis_center_y+(i-xlines/2)*stepdist);         
        // little black marker
        coord_yaxis_lines.graphics.setStrokeStyle(1,'round').beginStroke('#000');
        coord_yaxis_lines.graphics.moveTo(axis_center_x-steplinew, axis_center_y+(i-xlines/2)*stepdist).lineTo(axis_center_x+steplinew, axis_center_y+(i-xlines/2)*stepdist);
        // labels
        labels_x[i] = new createjs.Text('x', '14px Arial', '#333');
        labels_x[i].x = axis_center_x-12;
        labels_x[i].y = axis_center_y+(i-xlines/2)*stepdist-6; // move up a bit
        stage.addChild(labels_x[i]);
        labels_x[i].text = -(i-xlines/2);
        labels_x[i].textAlign = 'right';
    }
}
// 12 orthogonal lines
var ylines = 12;
var labels_y = [];
for(var i=0;i<=ylines;i++) {
    // dont overdraw y-axis-line
    if(i!=ylines/2) {
        // long gray line
        coord_xaxis_lines.graphics.setStrokeStyle(1,'round').beginStroke('#DDD');
        coord_xaxis_lines.graphics.moveTo(axis_center_x+(i-ylines/2)*stepdist, axis_start_y).lineTo(axis_center_x+(i-ylines/2)*stepdist, axis_start_y+yaxis_width);         
        // little black marker
        coord_xaxis_lines.graphics.setStrokeStyle(1,'round').beginStroke('#000');
        coord_xaxis_lines.graphics.moveTo(axis_center_x+(i-ylines/2)*stepdist, axis_center_y-steplinew).lineTo(axis_center_x+(i-ylines/2)*stepdist, axis_center_y+steplinew);           
        // labels
        labels_y[i] = new createjs.Text('x', '14px Arial', '#333');
        labels_y[i].x = axis_center_x+(i-ylines/2)*stepdist; // move up a bit
        labels_y[i].y = axis_center_y+12;
        stage.addChild(labels_y[i]);
        labels_y[i].text = (i-ylines/2);
        labels_y[i].textAlign = 'center';
    }
}

stage.update(); 

我已经实现了一个在线绘图仪，使用画布上的坐标系绘制x^13的多项式函数：-Easeljs是一个非常方便的工具

var stage = new createjs.Stage('canvas2d');
var coord_xaxis = new createjs.Shape();
stage.addChild(coord_xaxis);
var coord_yaxis = new createjs.Shape();
stage.addChild(coord_yaxis);
var coord_arrow_x = new createjs.Shape();
stage.addChild(coord_arrow_x);
var coord_arrow_y = new createjs.Shape();
stage.addChild(coord_arrow_y);
var coord_xaxis_lines = new createjs.Shape();
stage.addChild(coord_xaxis_lines);
var coord_yaxis_lines = new createjs.Shape();
stage.addChild(coord_yaxis_lines);

var axis_center_x = $('#canvas2d').width()/2;;
var axis_center_y = $('#canvas2d').height()/2;
var xaxis_width = $('#canvas2d').width()-0.05*$('#canvas2d').width();
var yaxis_width = $('#canvas2d').height()-0.05*$('#canvas2d').height();
var axis_start_x = ($('#canvas2d').width()-xaxis_width)/2;
var axis_start_y = ($('#canvas2d').height()-yaxis_width)/2;

var axis_strokewidth = 2;
coord_xaxis.graphics.setStrokeStyle(axis_strokewidth,'round').beginStroke('#000');
coord_xaxis.graphics.moveTo(axis_start_x, axis_center_y).lineTo(axis_start_x+xaxis_width, axis_center_y);
coord_yaxis.graphics.setStrokeStyle(axis_strokewidth,'round').beginStroke('#000');
coord_yaxis.graphics.moveTo(axis_center_x, axis_start_y).lineTo(axis_center_x, axis_start_y+yaxis_width);

// draw coordsys arrow for x-axis
var arrwidth = 5;
var arrxtnd = 5;
coord_arrow_x.graphics.beginFill('#000');
coord_arrow_x.graphics.setStrokeStyle(axis_strokewidth,'round').beginStroke('#000');
coord_arrow_x.graphics.moveTo(axis_center_x, axis_start_y-arrwidth/2).lineTo(axis_center_x+arrwidth, axis_start_y+arrwidth+arrxtnd).lineTo(axis_center_x-arrwidth, axis_start_y+arrwidth+arrxtnd).lineTo(axis_center_x, axis_start_y-arrwidth/2);
coord_arrow_x.graphics.endFill();

// draw coordsys arrow for y-axis
coord_arrow_y.graphics.beginFill('#000');
coord_arrow_y.graphics.beginStroke('#000');
coord_arrow_y.graphics.moveTo(axis_start_x+xaxis_width+arrwidth/2, axis_center_y).lineTo(axis_start_x+xaxis_width-arrwidth-arrxtnd, axis_center_y+arrwidth).lineTo(axis_start_x+xaxis_width-arrwidth-arrxtnd, axis_center_y-arrwidth).lineTo(axis_start_x+xaxis_width+arrwidth/2, axis_center_y);
coord_arrow_y.graphics.endFill();

var label_x = new createjs.Text('x', 'bold 16px Arial', '#333');
var label_y = new createjs.Text('y', 'bold 16px Arial', '#333');
stage.addChild(label_x);
stage.addChild(label_y);
label_x.x = axis_start_x+xaxis_width-5;
label_x.y = axis_center_y+10;
label_y.x = axis_center_x-20;
label_y.y = axis_start_y-5;

var stepdist = xaxis_width/14;
var steplinew = 6;
// 10 horizontal lines
var xlines = 10;
var labels_x = [];
for(var i=0;i<=xlines;i++) {
    // dont overdraw x-axis-line
    if(i!=xlines/2) {
        // long gray line
        coord_yaxis_lines.graphics.setStrokeStyle(1,'round').beginStroke('#DDD');
        coord_yaxis_lines.graphics.moveTo(axis_start_x, axis_center_y+(i-xlines/2)*stepdist).lineTo(axis_start_x+xaxis_width, axis_center_y+(i-xlines/2)*stepdist);         
        // little black marker
        coord_yaxis_lines.graphics.setStrokeStyle(1,'round').beginStroke('#000');
        coord_yaxis_lines.graphics.moveTo(axis_center_x-steplinew, axis_center_y+(i-xlines/2)*stepdist).lineTo(axis_center_x+steplinew, axis_center_y+(i-xlines/2)*stepdist);
        // labels
        labels_x[i] = new createjs.Text('x', '14px Arial', '#333');
        labels_x[i].x = axis_center_x-12;
        labels_x[i].y = axis_center_y+(i-xlines/2)*stepdist-6; // move up a bit
        stage.addChild(labels_x[i]);
        labels_x[i].text = -(i-xlines/2);
        labels_x[i].textAlign = 'right';
    }
}
// 12 orthogonal lines
var ylines = 12;
var labels_y = [];
for(var i=0;i<=ylines;i++) {
    // dont overdraw y-axis-line
    if(i!=ylines/2) {
        // long gray line
        coord_xaxis_lines.graphics.setStrokeStyle(1,'round').beginStroke('#DDD');
        coord_xaxis_lines.graphics.moveTo(axis_center_x+(i-ylines/2)*stepdist, axis_start_y).lineTo(axis_center_x+(i-ylines/2)*stepdist, axis_start_y+yaxis_width);         
        // little black marker
        coord_xaxis_lines.graphics.setStrokeStyle(1,'round').beginStroke('#000');
        coord_xaxis_lines.graphics.moveTo(axis_center_x+(i-ylines/2)*stepdist, axis_center_y-steplinew).lineTo(axis_center_x+(i-ylines/2)*stepdist, axis_center_y+steplinew);           
        // labels
        labels_y[i] = new createjs.Text('x', '14px Arial', '#333');
        labels_y[i].x = axis_center_x+(i-ylines/2)*stepdist; // move up a bit
        labels_y[i].y = axis_center_y+12;
        stage.addChild(labels_y[i]);
        labels_y[i].text = (i-ylines/2);
        labels_y[i].textAlign = 'center';
    }
}

stage.update();