设置HTML5 Canvas的背景填充，描边和不透明度
我使用下面的代码来设置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不适用于canvas。
风格/ CSS：
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一起使用，你也可以在不改变内部分辨率的情况下将它们设置为不同的大小，例如在全屏1024x768canvas中运行400×300游戏。