바닐라 자바 ​​스크립트 만 사용하여 캔버스를 만들고 그릴 수 있습니까?

Question

JavaScript없이 에 캔버스를 그리는 방법을 찾기 위해 웹 전체를 살펴 보았습니다. 나는 processing.js를 사용하는 khanacademy.org [my profile]에서 주로 프로그램을 작성하므로 fill(164,228,252); rect(0, 0, 20, 20); 을 입력하고 파란색 직사각형을 사용하는 것으로 익숙해 졌기 때문에 내가 부끄럽다는 것을 인정할 것이다. 그러나 그릴 수 있으면 좋을 것이다. 오프라인으로 프로그래밍 중이거나 JS JS 게임을 만들고 싶다면 JS가있는 캔버스를 사용하십시오.

Answer 1

"HTML이 없음"의 의미에 따라 다릅니다. Canvas는 HTML 요소이므로, HTML이 어떻게 든 관련 될 것입니다. JavaScript를 통해 DOM에 직접 액세스하는 경우에도 HTML 페이지가 "탑재 지점"으로 필요하며 JS 코드를로드 할 수단이 필요합니다.

캔버스가 포함 된 페이지를 작성하고 싶지 않은 경우 아래의 스 니펫과 같이 응용 프로그램 시작 부분에 페이지에 추가 할 수 있습니다. 당신은 어떤 HTML없이 무엇을

var canvas = document.createElement('canvas'); 
 
var c2d = canvas.getContext("2d"); 
 

 
document.body.appendChild(canvas); 
 

 
c2d.fillStyle = "red"; 
 
c2d.fillRect(0,0,300,200);