我使用以下代码设置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();
}
答案 0 :(得分:18)
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
不适用于画布。
答案 1 :(得分:15)
样式/ 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)';
答案 2 :(得分:2)
实际上,style.height
和style.width
可以使用画布,您也可以将它们设置为不同的大小而不改变内部分辨率,例如:在全屏1024x768画布中运行400x300游戏。