캔버스에 페인트하는 방법?

캔버스에 페인트하는 방법을 알려주시겠습니까? 다음은 HTML 5 코드는 다음과 같습니다캔버스에 페인트하는 방법?

var TableHeight = 300, 
    TableWidth = 500,  
function init() { 
    canvas = document.getElementById('canvas'); 
    context = canvas.getContext('2d'); 
    table.draw(); 
} 

table = { 
    color: '#000', 
    PositionX : 1, 
    PositionY: 1, 
    width: TableWidth, 
    height: TableHeight, 
    draw: function(){ 
     context.fillStyle = this.color; 
     context.fillRect = (this.PositionX, this.PositionY, this.width, this.height); 
     context.clearRect(5, 5, TableWidth - 10, TableHeight - 10); 
    } 
}

여기 내 HTML 코드

내 영어 죄송합니다

<body> 
    <canvas id ='canvas' width = 500px height = 300px ></canvas> 
    <script>init()</script> 
</body>

입니다.

출처

2012-10-05 user1724080

내가 코드에 문제가있는 가정이 질문에 정확한 쿼리를 지적하시기 바랍니다. – Rndm

여기서 문제는 fillRect, fillStyle 등이 속성이 아니라 메소드라는 것입니다. 당신은 너무처럼 그들을 호출 할 필요가 :

context.fillStyle(this.color);

당신은 또한 좋은 자바 스크립트 스타일에 대한 포인터 Douglas Crockford's 웹 사이트를 보라 대한 추가 정보와 샘플

에 대한 MDN에 문서를 참조하십시오. 예를 들어 특정 위치에서 var 키워드를 생략하면 변수가 의도하지 않게 전역 변수가됩니다.

출처

2012-10-05 21:14:30 Jay

코드에 여러 가지 문제가 있습니다.

첫째로, 귀하의 함수 선언은 내가 볼 수있는 한 잘못되었습니다. 마지막 전역 변수 다음에 세미콜론 대신 쉼표를 넣으면 정의되지 않습니다. 아래는 변수를 통해 그 일을하지 않기 때문에 제대로, 함수를 정의하는 방법은 다음과 같습니다

var TableHeight = 300, 
    TableWidth = 500; 

function init() { 
    canvas = document.getElementById('canvas'); 
    context = canvas.getContext('2d'); 
    table.draw(); 
}

마지막으로 .fillStyle는 속성, 그리고 방법 반면, 동일, .fillRect()의 사실이 아니다, 어떤 참으로 방법과 같은 실행해야 :

var table = { 
    color: '#000', 
    PositionX: 1, 
    PositionY: 1, 
    width: TableWidth, 
    height: TableHeight, 
    draw: function() { 
     context.fillStyle = this.color; 
     context.fillRect(this.PositionX, this.PositionY, this.width, this.height); 
     context.clearRect(5, 5, TableWidth - 10, TableHeight - 10); 
    } 
}

DEMO

출처

2012-10-05 21:18:58 Daedalus

많은 감사합니다. 작동합니다! – user1724080

@ user1724080 문제가 해결 되었다면 아래쪽 화살표 아래에있는 oulined 체크 표시를 클릭하여 문제를 해결하십시오. – Daedalus

캔버스에 페인트하는 방법?

답변

관련 문제