javascript - 如何将样式设置为 html5 画布？

Question

我使用下面的代码将样式设置为“Canvas”。但我无法设置"fillStyle"为画布。但是strokeStyle并且lineWidth工作正常。

Init(){
     var can = byId('myCanvas');

        // get it's context
        hdc = can.getContext('2d');

        hdc.strokeStyle = 'red';
        hdc.lineWidth = 2;

        // Fill the path
        hdc.fillStyle = "#9ea7b8";
        hdc.fill();
}

//并用坐标调用drawPoly函数。

function drawPoly(coOrdStr) {
        var canvas = byId('myCanvas');
        hdc.clearRect(0, 0, canvas.width, canvas.height);

        var mCoords = coOrdStr.split(',');
        var i, n;
        n = mCoords.length;
        hdc.beginPath();
        hdc.moveTo(mCoords[0], mCoords[1]);
        for (i = 2; i < n; i += 2) {
            hdc.lineTo(mCoords[i], mCoords[i + 1]);
        }
        hdc.lineTo(mCoords[0], mCoords[1]);
        hdc.stroke();

    }

有人可以帮忙吗？

Answer 1

您没有使用任何形状进行填充。您需要添加它。我猜您正在尝试填充整个画布。那么这对你有用。试试这个：

 var can=document.getElementById("myCanvas");
 var hdc=can.getContext("2d");
 hdc.strokeStyle = 'red';
 hdc.lineWidth = 2;
 hdc.fillStyle="#FF0000";
 hdc.fillRect(0,0,can.width,can.height);

工作小提琴