设置HTML5画布的背景填充，笔触和不透明度 [英] Set background fill, stroke, and opacity of HTML5 Canvas

问题描述

我使用下面的代码设置样式 myCanvas ，但我不能设置 fillStyle 。然而， strokeStyle 和 lineWidth 工作正常。

I use the below code to set styles of myCanvas, but I am not able to set fillStyle. Yet, strokeStyle and lineWidth is working fine. Could anyone please help with this?

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();

    }

推荐答案

Style / CSS：

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

---

jQuery： / p>

---

jQuery:

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

---

JavaScript： / p>

---

JavaScript:

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

这篇关于设置HTML5画布的背景填充，笔触和不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！