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();
}
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';
}
Be careful that style.height
or style.width
will not work with canvas.
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)';
实际上, style.height
和style.width
可以与canvas一起使用,你也可以在不改变内部分辨率的情况下将它们设置为不同的大小,例如在全屏1024x768画布中运行400x300游戏。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.