자바 스크립트 그라데이션이 작동하지 않습니다.

Question

현재 자바 스크립트와 HTML 캔버스 요소를 사용하여 대화 형 응용 프로그램을 코딩하고 있습니다. 내가 코딩하고있는 것 중 하나는 불투명도 그라디언트입니다. 내 그라디언트는 투명에서 부분 불투명으로 바래지 만 그라디언트를 만들 장소로 정의한 전체 영역은 투명도가 떨어지지 않고 부분적으로 불투명합니다.

function draw() { 

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
var grd = ctx.createLinearGradient(0, 1000, 0, 0); 

grd.addColorStop(0.5, "rgba(255, 255, 255, 0.5)"); 
grd.addColorStop(1, "rgba(255, 255, 255, 0)"); 
ctx.fillStyle = grd; 
ctx.fillRect(0, 660, 1000, 10); 

} 

Answer 1

그것은 당신이 createLinearGradient 및 fillRect에서 사용하는 치수에 뭔가가 : 여기에 내 코드입니다. 지금 당신은 그라데이션 영역을 매우 큰 얇은 직사각형 [(0,0) ~ (0,1000)]으로 정의하고 있습니다. 그러나 그래디언트 사각형을 매우 큰 직사각형 [(0,660)에서 (1000,10)]로 그립니다.

원하는 출력이 어떻게 보이는지 정확히 알 수는 없지만 사용자의 ctx.fillRect 행이 잘못되었다고 생각됩니다. 나를 위해 다음과 같은 일을 시도 :

function draw() { 

    var canvas = document.getElementById("canvas"); 
    var ctx = canvas.getContext("2d"); 
    var grd = ctx.createLinearGradient(0, 1000, 0, 0); 

    grd.addColorStop(0.5, "rgba(255, 255, 255, 0.5)"); 
    grd.addColorStop(1, "rgba(255, 255, 255, 0)"); 
    ctx.fillStyle = grd; 
    ctx.fillRect(0, 10, 1000, 660); 

} 

그리고 당신은