Canvas Variable 텍스트에서 색상이 변경되지 않고 검은 색으로 유지됩니다.

Question

색상이 캔버스에서 영향을받지 않는 것으로 보입니다. 코드 :

var l="Lorem Ipsum" 
l=l.replace(/%20/g," ");  
var index=l; 
if(index==-1); 

/*var elem = document.getElementById("wordCanv"); 
elem.fillStyle = "rgb(255, 0, 0)"; */  

var pixels=new Array(); 
var canv=$('canv'); 
var ctx=canv.getContext('2d'); 

ctx.fillStyle="blue"; 
ctx.strokeStyle="blue"; 
ctx.fill(); 
var wordCanv=$('wordCanv'); 
var wordCtx=wordCanv.getContext('2d'); 
wordCtx.fillStyle="blue"; 
wordCtx.strokeStyle="blue"; 
wordCtx.fill(); 
var mx=-1; 
var my=-1; 
var words=""; 
var txt=new Array(); 
var cw=0; 
var ch=0; 
var resolution=1; 
var n=0; 
var timerRunning=false; 
var resHalfFloor=0; 
var resHalfCeil=0; 

도움을 주시면 감사하겠습니다. 감사!

Answer 1

먼저 요소를 선택하지 않았습니다. $('canv')은 태그가 canv (요소 없음) 인 요소를 찾습니다. 선택자에 #을 추가하여 $('#canv')과 같은 ID로 선택해야합니다.

둘째, $(selector)은 선택된 요소의 배열과 유사한 객체 (있는 경우)를 반환하므로 어떤 요소를 인덱스로 지정해야합니까 (var canv = $('#canv')[0];).

세 번째로, fill은 그려진 모양을 채 웁니다. 전체 캔버스를 채우려면 대신 ctx.fillRect(0, 0, canv.width, canv.height);을 사용하십시오.

예 :

// select the canvas properly 
 
var canv = $('#canv')[0]; 
 
// get it context 
 
var ctx = canv.getContext('2d'); 
 

 
// set the style 
 
ctx.fillStyle="blue"; 
 
ctx.strokeStyle="blue"; 
 

 
// fill the rect 
 
ctx.fillRect(0, 0, canv.width, canv.height);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas id='canv'></canvas>