Question

我只想在画布上画一个字母。我正在使用filltext()在画布上绘制一个角色。

这是第一次工作，但如果我回到菜单并再次尝试，则该字符不会显示在画布上。

当我试图找到控制台日志的任何错误时，它显示我调用了函数并且还绘制了字母（我正在计算画布上的像素数）但不知何故我没有在画布上显示字母。

function setupCanvas(character) {
    canvasVar.height = window.innerHeight;
    canvasVar.width = window.innerWidth;
    canvasCx.lineWidth = 14;
    canvasCx.lineCap = 'round';
    canvasCx.strokeStyle = 'rgb(0, 0, 50)';
    //canvasCx.strokeStyle = $rootScope.userPreferedColor;
    canvasCx.font = 'bold 25em helvetica';
    canvasCx.fillStyle = 'rgb(255, 0, 0)';
    canvasCx.textBaseline = 'middle';
    drawletter(character);
    //pixels = canvasCx.getImageData(0, 0, canvasVar.width, canvasVar.height);
    //console.log(JSON.stringify(pixels))
}

function drawletter(char) {
    //making letter a global variable - not the right way :) dirty solution
    letter = char;
    centerx = (canvasVar.width - canvasCx.measureText(letter).width) / 2;
    centery = canvasVar.height / 2;
    //canvasCx.clearRect(0, 0, canvasVar.width, canvasVar.height);
    canvasCx.fillText(letter, centerx, centery);
    //getting the border for the letter only
    pixels = canvasCx.getImageData(centerx,0,canvasCx.measureText(letter).width,canvasVar.height);
    console.log("letter is drawn to the canvas "+ getpixelamount(255, 0, 0));
}//end of draw letter

在github repo

找到总代码

Answer 1

如果您删除页面缓存，它将解决问题

Canvas .fillText函数在第一次使用后无效

1 个答案: