漸變填充和畫布大小？

下面的代碼顯示了一個徑向漸變填充矩形。如果我取消註釋設置畫布寬度和高度的兩條線，它將顯示一個黑色矩形，而不是一個填充漸變的線。爲什麼？如何設置寬度和高度，仍然能夠顯示漸變？漸變填充和畫布大小？

 
<!DOCTYPE HTML> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8" /> 
    <script type="text/javascript"> 
     function on_load(e) { 
     var container = document.getElementById("container"); 
     var canvas = container.appendChild(document.createElement("canvas")); 
     var context = canvas.getContext("2d"); 
     var gradient = context.createRadialGradient(30, 30, 10, 30, 30, 30);
 
     gradient.addColorStop(0, "rgba(0,0,0,1)"); 
     gradient.addColorStop(1, "rgba(0,0,0,0)");
 
     context.fillStyle = gradient;
 
     //canvas.width = 150; 
     //canvas.height = 150;
 
     context.fillRect(0, 0, 60, 60); 
     } 
    </script> 
    </head> 
    <body onload="on_load()"><div id="container"></div></body> 
</html>

來源

2012-02-13 akonsu

必須在使用其上下文之前更改畫布尺寸

來源

2012-02-13 15:53:24 soju

我想原因是，設置寬度或高度清除畫布，它的設置。

來源

2012-02-13 15:50:18 akonsu

漸變填充和畫布大小？

回答

相關問題