Question

我正在尝试创建一个工具供用户上传和注释图像，然后保存到数据库。该工具允许绘制线条，添加文本和擦除。现在，当谈到添加文本时，svg sulution可能会更好，但还没有找到一个动态加载背景图像。

无论如何，用户需要能够添加多个文本并在图像上移动它们。为此，我需要动态地为文本片段创建图层，即单击文本按钮并且文本字段中包含一些文本。

此刻，文本会在相同位置添加到画布的顶部。如何在这个函数中循环创建图层：

function draw_text() {
ctx.fillStyle = "blue";
ctx.font = "12pt Helvetica";
ctx.fillText($('#text_entry').val(), 10, 250);
}

Answer 1

我不是100％肯定你在问什么，但我会根据你的标题给出答案动态创建画布元素。

这是我用来创建新画布的功能。改变它以满足您的需求。

使用它：

var myCanvas = createLayer(500, 500);
var myContext = myCanvas.getContext('2d');

<强>功能

function createLayer (w, h) {

    var canvas = document.createElement('canvas');

    canvas.width = w;
    canvas.height = h;
    canvas.style.width = w + "px";
    canvas.style.height = h + "px";
    canvas.style.position = "absolute";

    var body = document.getElementsByTagName("body")[0];
    body.appendChild(canvas);

    return canvas;
},

然后，您还可以将上下文存储在数组中，也允许您遍历每个层。

Answer 2

您可以创建一个拥有自己的draw_text（）的Layer对象。所有的Layers对象都是一个数组，你可以调用所有的render方法。

图层对象：

function Layer(_posX, _posY, _text, _context, _font, _color){
    this.posX = _posX;
    this.poxY = _posY;
    this.text = _text;
    this.ctx = _context; //canvas context
    this.font = _font;   //String
    this.color = _color; //String "rgb(255, 255, 255)" or "#FFFFFF"

    this.draw_text = function(){
       this.ctx.fillStyle = this.color;
       this.ctx.font = this.font;
       this.ctx.fillText(this.text, this.posX, this.posY);
}

渲染：

RenderPile = [];
for(elt in RenderPile){
   elt.draw_text();
}

如果我不清楚，请提问。

Answer 3

感谢您的建议。我决定实现canvas.js，它完美地完成了。很容易实现。

Canvas

动态创建画布元素

3 个答案: