Question

当我在writeTextToCanvas方法之前调用clearCanvas方法时，它运行正常，如果我先调用clearCanvas方法而不是writeTextToCanvas，它不起作用，绘制函数等等都在clearCanvas后工作但fillText不起作用当我调用fillText时，也会清除所有画布

当我在fillText之前设置context.globalAlpha = 0.5时，我几乎看不到画布上的文字，但画布中的任何内容都会以某种方式被删除

var canvas;
var context;
var selectedRole = DRAW_TOOLS.PENCIL;

function initDrawingCanvas(index) {
    var question = document.getElementsByClassName('question').item(index);
    canvas = question.getElementsByClassName('questionDrawingCanvas').item(0);
    context = canvas.getContext("2d");
    canvasWidth = canvas.width;
    canvasHeight = canvas.height;

    compositeOperation = context.globalCompositeOperation;

    canvas.addEventListener("touchmove", onCanvasTouchMove, false);
    canvas.addEventListener("touchstart", onCanvasTouchStart, false);
    canvas.addEventListener("touchstop", onCanvasTouchStop, false);
}

var startX = 0;
var startY = 0;
var endX = 0;
var endY = 0;
var compositeOperation;

function onCanvasTouchMove(event){
    endX = event.changedTouches[0].clientX - $(canvas).offset().left;
    endY = event.changedTouches[0].clientY - $(canvas).offset().top;

        if(selectedRole == DRAW_TOOLS.PENCIL){
            context.beginPath();
            context.moveTo(startX, startY);
            context.lineTo(endX, endY);
            context.strokeStyle = $('.colorPicker').css('background-color');
            context.lineWidth = parseInt($('#pencilSize').attr("data-size"));
            context.stroke();
        }else if(selectedRole == DRAW_TOOLS.ERASER){
            context.save();
            context.globalCompositeOperation = "destination-out";
            context.arc(endX,endY,25,0,Math.PI*2,false);
            context.fill();
            context.restore();
        }

    startX = endX;
    startY = endY;
}

function onCanvasTouchStart(event){
    $("#colorPicker").css("display", "none");
    $("#pencilSize").css("display", "none");
    $("#textColorPicker").css("display", "none");
    $("#canvas_textSize").css("display", "none");


    startX = event.changedTouches[0].pageX - $(canvas).offset().left;
    startY = event.changedTouches[0].pageY - $(canvas).offset().top;

    if(selectedRole == DRAW_TOOLS.TEXT){
        showConfirmDialog('<textarea id="canvasTextArea" class="canvasTextArea"></textarea>', RESOURCES.CANVAS_TEXT_TITLE, {positiveButton: RESOURCES.OKAY, negativeButton: RESOURCES.CANCEL}, function(){
            var text = $("#canvasTextArea").val();
            if(isNullOrUndefined(text)) return;
            writeTextToCanvas(text);
            hideDialog();
        }, function(){
            hideDialog();
        });
        $("#canvasTextArea").focus();
        $("#canvasTextArea").css("font-size", $('#textSizePicker').attr("data-size") + "px");
        $("#canvasTextArea").css("color", $('.textColorPicker').css("background-color"));
    }
}

function onCanvasTouchStop(event){
    console.log(event);
}    

function clearCanvas(){
    context.clearRect(0, 0, canvas.width, canvas.height);
}

function getCanvasContent(){
    return canvas.toDataURL();
}

function writeTextToCanvas(text) {
    context.globalCompositeOperation = "source-over";
    context.textBaseline = "top";
    context.font = $('#textSizePicker').attr("data-size") + 'px sans-serif';
    context.fillStyle = $('.textColorPicker').css("background-color");
    context.fillText(text, startX, startY);
}

我应该使用clear canvas或清除某些部分like eraser然后我可以正常填写文本？

Answer 1

您对clearRect()的调用正在停止整个脚本，因为它会抛出错误（请检查控制台）。你没有通过矩形传递给电话。

需要像：

一样调用

context.clearRect(0, 0, canvas.width, canvas.height);

以下是一个工作示例：http://jsfiddle.net/pe19L15m

HTML5 Canvas为什么fillText（）方法在clearRect（）之后清除所有内容

1 个答案: