그라데이션 채우기 및 캔버스 크기?

아래 코드는 방사형 그래디언트로 채워진 사각형을 표시합니다. 캔버스의 너비와 높이를 설정하는 두 줄의 주석을 해제하면 그라디언트가 채워지는 대신 검정색 사각형이 표시됩니다. 왜? 너비와 높이를 설정하고 그래디언트를 표시하는 방법은 무엇입니까?그라데이션 채우기 및 캔버스 크기?

 
<!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

그라데이션 채우기 및 캔버스 크기?

답변

관련 문제