<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas</title>
</head>
<body>
<canvas id="mycanvas" width="600" height="400" style="border: 3px solid;">
<!--canvas는 html이 아니고 element이다.-->
</canvas>
<script>
var ctx = document.getElementById("mycanvas");
var myContext = ctx.getContext("2d");
myContext.beginPath();
myContext.strokeStyle = "rgb(255,0,0)";
//myContext.fillStyle ="blue";
myContext.fillStyle ="#FF99CC";
//4각형
// myContext.strokeRect(10,10,200,150); //사각형
// myContext.fillRect(250,10,200,150); //검정사각형
// myContext.fillRect(10,170,200,150); //두번째행 검정사각형
// myContext.clearRect(270,20,100,50); //두번째 사각형 부분적으로 비우기
//선그리기
//검정삼각형
// myContext.beginPath();
// myContext.moveTo(100,20);
// myContext.lineTo(40,120);
// myContext.lineTo(160,120);
// myContext.fill();
// myContext.moveTo(300,20);
// myContext.lineTo(200,60);
// myContext.lineTo(200,120);
// myContext.lineTo(400,120);
// myContext.lineTo(400,60);
// myContext.closePath();
// myContext.stroke();
//원그리기
myContext.beginPath();
myContext.arc(100, 75, 50, 0, 2*Math.PI);
myContext.closePath();
myContext.fill();
// myContext.stroke();
myContext.beginPath();
myContext.arc(250, 75, 50, 0, 1.5*Math.PI);
//myContext.closePath();
myContext.stroke();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas</title>
</head>
<body>
<canvas id="mycanvas" width="600" height="400" style="border: 3px solid;">
<!--canvas는 html이 아니고 element이다.-->
</canvas>
<script>
var ctx = document.getElementById("mycanvas");
var myContext = ctx.getContext("2d");
myContext.beginPath();
myContext.strokeStyle = "rgb(255,0,0)";
//myContext.fillStyle ="blue";
myContext.fillStyle ="#FF99CC";
//4각형
// myContext.strokeRect(10,10,200,150); //사각형
// myContext.fillRect(250,10,200,150); //검정사각형
// myContext.fillRect(10,170,200,150); //두번째행 검정사각형
// myContext.clearRect(270,20,100,50); //두번째 사각형 부분적으로 비우기
//선그리기
//검정삼각형
// myContext.beginPath();
// myContext.moveTo(100,20);
// myContext.lineTo(40,120);
// myContext.lineTo(160,120);
// myContext.fill();
// myContext.moveTo(300,20);
// myContext.lineTo(200,60);
// myContext.lineTo(200,120);
// myContext.lineTo(400,120);
// myContext.lineTo(400,60);
// myContext.closePath();
// myContext.stroke();
//원그리기
// myContext.beginPath();
// myContext.arc(100, 75, 50, 0, 2*Math.PI);
// myContext.closePath();
// myContext.fill();
// // myContext.stroke();
// myContext.beginPath();
// myContext.arc(250, 75, 50, 0, 1.5*Math.PI);
// //myContext.closePath();
// myContext.stroke();
//그라데이션
var gradient = myContext.createLinearGradient(0,0,100,0); //왼쪼부터 오른쪽으로
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "green");
myContext.fillStyle = gradient; //4각형에 fillStyle 적용
myContext.fillRect(10,10,100,100);
var gradient = myContext.createLinearGradient(150,0,250,100); //왼쪼부터 오른쪽으로
gradient.addColorStop(0, "blue");
gradient.addColorStop(1, "red");
myContext.fillStyle = gradient; //4각형에 fillStyle 적용
myContext.fillRect(150,10,100,100);
</script>
</body>
</html>
