javascript - Canvas .fillText 函数在第一次后不起作用

Question

我只是想在 Canvas 上画一封信。我正在使用 filltext() 在 Canvas 上绘制一个字符。

这是第一次工作，但如果我返回菜单并重试， Angular 色不会显示在 Canvas 上。

虽然我试图通过控制台日志查找任何错误，但它显示函数被调用并且字母也被绘制(我正在计算 Canvas 上的像素数)但不知何故我没有在 Canvas 显示器上收到字母。

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

如果你删除页面缓存它会解决问题