자바 스크립트로 캔버스에 그리기
모든 자바 스크립트와 함께 할 수 있어야 HTML 캔버스에 그리기 :
예
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
»그것을 자신을 시도 1 단계 : 캔버스 요소를 찾기
우선, 당신은 발견해야한다 <canvas> 요소를.
이것은 HTML DOM 방법을 사용하여 수행됩니다 getElementById() :
var canvas = document.getElementById("myCanvas");
2 단계 : 그리기 개체 만들기
둘째, 당신은 캔버스 그리기 개체가 필요합니다.
getContext() 도면의 속성과 메소드로, 내장 된 HTML 개체입니다 :
var ctx = canvas.getContext("2d");
3 단계 : 캔버스에 그리기
마지막으로, 당신은 캔버스에 그릴 수 있습니다.
색상 빨간색으로 그리기 개체의 채우기 스타일을 설정합니다 :
ctx.fillStyle = "#FF0000";FillStyle 등록은 CSS 색상, 그라디언트 또는 패턴이 될 수 있습니다. 기본 fillStyle에서는 검은 색이다.
fillRect( x,y,width,height ) 방법은 캔버스에 채우기 스타일로 채워진 사각형을 그립니다 :
ctx.fillRect(0,0,150,75);