HTML 캔버스에 삼각법 패턴을 그리는 방법은 무엇입니까?

Question

저는 웨이브의 Y 값에 따라 검정색에서 빨간색으로 그래픽 패턴을 그리려합니다. 나는 그것이 바로 접근 엉하고 있어요 여부를 확인하기 위해, 나는 JSFiddle에서 테스트 시작 :

Test

var j,k; 
k=255; 

var green=150; 
var blue=150; 

var canvas=document.getElementById('canvas'); 
var ctx=canvas.getContext('2d'); 

for(j=0;j<k;j++) 
      { 

       ctx.beginPath(); 
       ctx.moveTo(j, 0); 
       ctx.lineTo(j, 150); 
       ctx.strokeStyle = "rgb("&j&", 0, 0)"; 
       ctx.stroke(); 


      } 

을하지만 결과는 모든 라인에서 그냥 회색 톤이다 그리기 방법이지만 루프 내부에 있으며 '빨간색'값이 변경됩니다. 연습으로 Juhana의 좋은 제안 @ 퍼팅

Answer 1

: 자바 스크립트에서

var j,k; 
k=255; 

var green=150; 
var blue=150; 

var canvas=document.getElementById('canvas'); 
var ctx=canvas.getContext('2d'); 

for(j=0;j<k;j++){ 
    ctx.beginPath(); 
    ctx.moveTo(j, 0); 
    ctx.lineTo(j, 150); 
    ctx.strokeStyle = "rgb("+j+",0,0)"; 
    ctx.stroke();  
}