Question

我知道画布无法从字段中编辑文本。

$(document).ready(function () {
    var canvas = $('#cEditor')[0];
    var context = canvas.getContext('2d');
    var newTxt = 'Your text here';

    createTxt();

    $('input[data-selector="inputName"]').bind('change', function () {
        var newVal = $(this).val();
        changeTxt(newVal);
    });

    function createTxt() {
        context.translate(canvas.width / 2, canvas.height / 2);
        context.font = '18pt Calibri';
        context.textAlign = 'center';
        context.fillStyle = '#000';
        context.fillText(newTxt, 0, 0);
    }

    function changeTxt(newVal) {
        newTxt = newVal;
        context.save();
        context.fillText(newTxt, 0, 0);
        context.restore();
    };
});

但它可以在画布上创建新文本而不会更改画布上的文本。

我希望有人告诉我这个网站的构建编辑器的工作流程和组件 http://customerscanvas.com/demos/Editor.aspx?header=1-sided%20Business%20Card&design=BusinessCard1&downloadEnabled=true&backgroundButtonEnabled=true&rectEllipseButtonsEnabled=false（抱歉，我不是垃圾邮件，例如直播网站）在该网站上，您可以更改样式/编辑文本，添加文本，添加图像等。

Answer 1

你必须清除画布，可以重置宽度，然后重绘文本，所以基本上你可以做同样的事情，就像你第一次创建它一样，每次文本改变，就像这个：

$(document).ready(function () {
    $('input[data-selector="inputName"]').on('input', createTxt).trigger('input');

    function createTxt() {
        var canvas = document.getElementById('cEditor');
        var context = canvas.getContext('2d');

        canvas.width = canvas.width;
        context.translate(canvas.width / 2, canvas.height / 2);
        context.font = '18pt Calibri';
        context.textAlign = 'center';
        context.fillStyle = '#000';
        context.fillText(this.value, 0, 0);
    }
});

FIDDLE

使用jQuery在画布HTML5上编辑文本

1 个答案: