Question

我有一个前一段时间写的Chrome扩展程序。其中的功能之一是，它将使用document.getCSSCanvasContext绘制HTML元素的背景。但是显然Google已弃用该功能，因此我的绘图方法不再起作用。不幸的是，自从我编写它以了解如何正确替换它已经有一段时间了。到目前为止，我已经做到了。

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) + "%");

但是它并没有填满任何东西：

那我在那里想念什么？

Answer 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) + "%";

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

1 个答案: