动态创建画布元素

Question

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

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

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

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() 的图层对象。所有Layers对象都被push到一个数组中，你通过调用所有的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