एचटीएमएल 5 कैनवास

Question

की पृष्ठभूमि भरने, स्ट्रोक और अस्पष्टता सेट करें, मैं 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(); 

    } 

Answer 1

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 कैनवास के साथ काम नहीं करेंगे।

Answer 2

शैली/सीएसएस:

<style>#myCanvas { background-color: rgba(158, 167, 184, 0.2); }</style> 

---

jQuery:

$('#myCanvas').css('background-color', 'rgba(158, 167, 184, 0.2)'); 

---

जावास्क्रिप्ट:

document.getElementById("myCanvas").style.backgroundColor = 'rgba(158, 167, 184, 0.2)'; 

Answer 3

वास्तव में, style.height और style.width कैनवास के साथ काम करते हैं, आप भी भीतरी संकल्प बदल रहा है, उदा बिना एक अलग आकार के लिए उन सेट कर सकते हैं एक पूर्णस्क्रीन 1024x768 कैनवास में 400x300 गेम चला रहा है।