以下のコードを使用して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();
}
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
は、キャンバスでは機能しません。
スタイル/ 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)';
実際、style.height
およびstyle.width
はキャンバスで機能しますが、内部解像度を変更せずに異なるサイズに設定することもできます。フルスクリーン1024x768キャンバスで400x300ゲームを実行します。