web-dev-qa-db-ja.com

HTML5 Canvasの背景の塗りつぶし、ストローク、および不透明度を設定します

以下のコードを使用してmyCanvasのスタイルを設定しますが、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.opacity = 0.2;
        hdc.fill();
}

// And call the drawPoly function with coordinates.
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();

    }
javascriptjqueryhtml5canvas
13
Bharathi
Init()
{
    var can = document.getElementById('myCanvas');
    h = parseInt(document.getElementById("myCanvas").getAttribute("height"));
    w=parseInt(document.getElementById("myCanvas").getAttribute("width"));

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

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

    // Fill the path
    hdc.fillStyle = "#9ea7b8";
    hdc.fillRect(0,0,w,h);
    can.style.opacity = '0.2';
}

style.heightまたはstyle.widthは、キャンバスでは機能しません。

18
ProllyGeek

スタイル/ CSS：

<style>#myCanvas { background-color: rgba(158, 167, 184, 0.2); }</style>

jQuery：

$('#myCanvas').css('background-color', 'rgba(158, 167, 184, 0.2)');

JavaScript：

document.getElementById("myCanvas").style.backgroundColor = 'rgba(158, 167, 184, 0.2)';
15
forsvunnet

実際、style.heightおよびstyle.widthはキャンバスで機能しますが、内部解像度を変更せずに異なるサイズに設定することもできます。フルスクリーン1024x768キャンバスで400x300ゲームを実行します。

2
Diogo Schneider