cvas.fillStyle=`#FF0000`

Download Report

Transcript cvas.fillStyle=`#FF0000` 


캔버스(Canvas)란?

캔버스의 기초

사각형

선

이미지

단위
캔버스는(canvas)는 2차원그래프, 게임, 그래픽 외의 시각적인 이미지를
동적으로 구현할 수 있는 자바스크립트 API로 메소드와 속성으로 구현됩
니다.
<!DOCTYPE HTML>
< html lang="ko">
< head>
<meta charset="UTF-8">
<title>HTML 5 Canvas 예제</title>
< /head>
< body>
<canvas id="Canvas" width="200" hegiht="300"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('Canvas');
var cvas=canvas.getContext('2d');
cvas.fillStyle='#FF0000‘;
cvas.fillRect(10,10,80,100);
</script>
< /body>
< /html>
결과
cvas.fillStyle="rgba(255,0,0,0.3)";
cvas.fillStyle="rgb(255,0,0)";
함수
fillRect
strokeRect
clearRect
속을 채운 사각형을 그립니다.
사각형 테두리만 그립니다.
지정한 사각영역을 투명하게 지웁니다.
<canvas id="Canvas" width="300" height="200"></canvas>
<script type="text/javascript“>
var canvas=document.getElementById('Canvas');
var cvas=canvas.getContext('2d');
cvas.fillStyle='#FF0000';
cvas.fillRect(10,10,150,180);
cvas.clearRect(20,20,70,90);
cvas.strokeRect(30,30,200,100);
</script>
함수
beginPath
closePath
lineWidth
moveTo
lineTo
패스(path)선언, 서브패스 수를 0으로설정
최초 시작점까지 직선을 긋고 서브패스를 닫음
선의 두께
선의 최초 시작점 좌표
선의 끝점 좌표
var element, context;
function line(){
context = element.getContext('2d');
context.beginPath();
context.moveTo(10, 10);
context.lineTo(10, 80);
context.lineTo(80, 80);
}
//선 긋기
function draw(){
element = document.getElementById('idOne');
if (element.getContext){
line();
context.stroke();
}
}
//삼각형
function triangle(){
element = document.getElementById('idTwo');
if (element.getContext){
line();
context.closePath();
context.stroke();
}
}
//함수 실행
draw();
triangle();
function drawCanvas() {
var canvas=document.getElementById('Canvas');
var cvas=canvas.getContext('2d');
var ballet = new Image();
ballet.src='IMG_4687.jpg';
cvas.drawImage(ballet, 10, 10);
};
function drawCanvas() {
var canvas=document.getElementById(‘Canvas');
var cvas=canvas.getContext('2d');
var ballet = new Image();
ballet.src='canvas_back.png;
cvas.drawImage(ballet, 10, 10);
cvas.beginPath();
cvas.strokeStyle='#FF0000';
cvas.moveTo(60,313);
cvas.lineTo(120,166);
cvas.lineTo(180,76);
cvas.lineTo(240,250);
cvas.lineTo(300,70);
cvas.lineTo(360,200);
cvas.lineTo(420,120);
cvas.lineTo(480,70);
cvas.stroke();
};
인치당 = 72pixel
X mm * 2.8346 = Y pixel
A4
210 mm
270 mm
A4
595pixel
842pixel
공부중……..
50 * 50