HTML 元素中的画布绘图未显示答案

【问题标题】：Canvas drawing in HTML element is not showingHTML 元素中的画布绘图未显示
【发布时间】：2019-08-30 11:00:30
【问题描述】：

我有一个前段时间写的 Chrome 扩展程序。其中一个功能是它会使用document.getCSSCanvasContext 绘制 HTML 元素的背景。但显然谷歌弃用了这个功能，所以我的绘图方法不再起作用了。不幸的是，我已经有一段时间没有写它来看看如何正确替换它了。到目前为止，我已经做到了。

HTML 是这样的：

    <div id="idStrgUsg">
        <canvas id="idSmplCvs" width="453" height="1"></canvas>
        <div id="idStrgUsgBar"></div>
    </div>

然后是JS：

    var perc = 75;

    //Get width of the fill bar
    var objFill = $("#idStrgUsgBar");
    var objParFill = objFill.parent();
    var w = objParFill.outerWidth();
    var h = objParFill.outerHeight();

    var w_f = w * perc / 100;

    var cnvs = document.getElementById("idSmplCvs");
    cnvs.width = w;
    cnvs.height = h;

    var ctx = cnvs.getContext('2d');
    ctx.clearRect(0, 0, w, h);
    ctx.globalAlpha = 0.5;

    ctx.fillStyle = "rgb(193,139,96)";

    ctx.fillRect(0, 0, w_f, h);

    objFill.text(perc.toFixed(1) + "%");

但它并没有用任何东西填充它：

那我错过了什么？

【问题讨论】：

将画布绝对定位到 div 中。

标签： javascript google-chrome google-chrome-extension html5-canvas

【解决方案1】：

看起来您需要定义父元素的高度和宽度。记录 h 和 w 的值，看看你得到了什么。或许可以参考https://jsfiddle.net/o4smqpLr/

<div id="idStrgUsg" style="width:100px; height: 10px">
        <canvas id="idSmplCvs" width="453" height="10"></canvas>
        <div id="idStrgUsgBar"></div>
    </div>

var perc = 75;

    //Get width of the fill bar
    var objFill = document.getElementById("idStrgUsgBar");
    var objParFill = objFill.parentElement;
    console.log(objParFill.style);
    var w = parseInt(objParFill.style.width);
    var h = parseInt(objParFill.style.height);
        console.log(w);
    console.log(h);
    var w_f = w * perc / 100;

    var cnvs = document.getElementById("idSmplCvs");
    cnvs.width = w;
    cnvs.height = h;

    var ctx = cnvs.getContext('2d');
    ctx.clearRect(0, 0, w, h);
    ctx.globalAlpha = 0.5;

    ctx.fillStyle = "rgb(193,139,96)";

    ctx.fillRect(0, 0, w_f, h);
        //ctx.stroke();
    objFill.innerHTML = perc.toFixed(1) + "%";

【讨论】：