J'utilise le code ci-dessous pour définir les styles de myCanvas
, mais je ne suis pas en mesure de définir fillStyle
. Pourtant, strokeStyle
et lineWidth
fonctionne bien. Quelqu'un pourrait-il s'il vous plaît aider avec cela?
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();
}
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';
}
Faites attention à ce que style.height
ou style.width
ne fonctionnera pas avec le canevas.
Style/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)';
Réellement, style.height
et style.width
travaillez avec le canevas, vous pouvez également les définir à une taille différente sans modifier la résolution interne, par exemple exécuter un jeu 400x300 dans une toile plein écran 1024x768.