캔버스에 8 개 이상의 직사각형을 그릴 수 없습니다.

캔버스에 간단한 직사각형을 그리려합니다. 여기 내 코드가있다. 코드가 완전히 실행됩니다. 그러나 그것은 단지 7 개의 직사각형과 8 개의 절반을 완전히 그립니다. 마지막 두 개의 사각형이 그려지지 않습니다. 내가 도대체 뭘 잘못하고있는 겁니까? 나는 IE9 베타, FF3 및 크롬 9 시도했다. 제발 도와주세요.캔버스에 8 개 이상의 직사각형을 그릴 수 없습니다.

<html> 
<head> 
<script src="javascript/jquery-1.4.4.min.js"></script> 
<script type="text/javascript" language="javascript"> 

$(document).ready(function() { 
    drawsegment($('#divTree')); 
}); 

function drawsegment(widget) { 
    var $ctx = $('<canvas />', { 
     width: '300', 
     height: '200' 
    }); 
    widget.html($ctx); 
    var ctx = $ctx[0].getContext('2d'); 

    ctx.fillStyle = "red"; 
    ctx.fillRect(0, 0, 255, 20); 
    ctx.fillStyle = "yellow"; 
    ctx.fillRect(0, 20, 255, 20); 
    ctx.fillStyle = "blue"; 
    ctx.fillRect(0, 40, 255, 20); 
    ctx.fillStyle = "green"; 
    ctx.fillRect(0, 60, 255, 20); 
    ctx.fillStyle = "violet"; 
    ctx.fillRect(0, 80, 255, 20); 
    ctx.fillStyle = "white"; 
    ctx.fillRect(0, 100, 255, 20); 
    ctx.fillStyle = "black"; 
    ctx.fillRect(0, 120, 255, 20); 
    ctx.fillStyle = "gray"; 
    ctx.fillRect(0, 140, 255, 20); 
    ctx.fillStyle = "yellow"; 
    ctx.fillRect(0, 160, 255, 20); 
    ctx.fillStyle = "blue"; 
    ctx.fillRect(0, 180, 255, 20); 
} 

</script> 
</head> 
<body> 
    <div id="divTree"></div> 
</body> 
</html>

출처

2010-12-22 harsha

안녕하세요 Avinash, 그것은 작동합니다. 내 코드처럼 캔버스가 동적으로 생성되면 작동하지 않습니다. – harsha

캔버스 너비와 높이 캔버스 요소 자체 대신에 스타일 속성의 속성을 정의해야합니다 캔버스가 마크 업에 정의되어있는 경우

var $ctx = $('<canvas />'); 
widget.html($ctx); 
widget.children('canvas').attr('width',300).attr('height',200);

출처

2010-12-22 11:34:18 acm

감사합니다 Andre, 예상대로 정확하게 작동합니다. – harsha

캔버스에 8 개 이상의 직사각형을 그릴 수 없습니다.

답변

관련 문제