Canvas .fillText 功能在第一次后不起作用答案

【问题标题】：Canvas .fillText function not working after the first timeCanvas .fillText 功能在第一次后不起作用
【发布时间】：2018-04-18 09:51:19
【问题描述】：

我只是想在画布上画一个字母。我正在使用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找到总代码

【问题讨论】：

请提供minimum, verifiable example。例如，我们不知道您的“菜单”代码中发生了什么。
在 [link] (github.com/anilkunchalaece/debugLearn) 找到代码。在 www/templates/practiceView.html 找到画布，在 www/controllers/practiceViewController.js 找到相应的 JS 代码，单击 list1 或 list 2，然后选择一个字母以转到画布视图，然后使用放置在画布上的 btn 返回菜单并选择另一个字母，现在该字母不会显示。

标签： javascript html image canvas

【解决方案1】：

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

【讨论】：