캔버스 - canvas 요소로 생성,
html 페이지 상에서 사각형태의 영역. 실제 그림은 자바스크립트를 통해.
context 객체 : JS에서 물감과 붓의 역할
< var canvas = document..getElementByle("myCanvas");
var context = canvas.context("2d");> 로 선언해서 시작.
1. 캔버스 안에 네모 만들기
<body>
<canvas id="myCanvas" width="300" height="100"
style="border:1px dotted rgb(21, 79, 112)"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "#00FF00";
context.fillRect(50,0,200,100);
</script>
</body>
2. 선만들기
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(0,0);
context.lineTo(100,100);
context.lineTo(150,50);
context.lineTo(200,100);
context.stroke();
</script>
</body>
3. 네모만들기
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.rect(100,10,80,100);
context.fillStyle = "yellow";
context.fill();
context.beginPath();
context.rect(0,50,80,150);
context.fillStyle = "red";
context.fill();
</script>
</body>
4. 네모만들기
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.rect(10, 10, 100, 100);
context.rect(50, 50, 100, 100);
context.rect(30, 30, 100, 100);
context.stroke();
</script>
</body>
5. 원만들기
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.arc(100,100,80,0, 2.0*Math.PI, false);
context.strokeStyle="pink";
context.stroke();
context.beginPath();
context.arc(100,100,60,0, 1.0*Math.PI, false);
context.closePath();
context.strokeStyle="blue";
context.stroke();
context.beginPath();
context.arc(100,100,40,0, 1.0*Math.PI, false);
context.strokeStyle="green";
context.fillStyle="yellow"
context.stroke();
context.fill();
context.beginPath();
context.arc(70,80,10,0, 2.0*Math.PI, false);
context.strokeStyle="black";
context.stroke();
context.beginPath();
context.arc(135,80,10,0, 2.0*Math.PI, false);
context.strokeStyle="black";
context.fillStyle="black"
context.stroke();
context.fill();
</script>
6. 곡선만들기
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(100,130);
context.bezierCurveTo(200,20,188,10,288,130)
context.lineWidth = 10;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.moveTo(300,30);
context.bezierCurveTo(130,20,188,10,288,130)
context.lineWidth = 10;
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.moveTo(50,30);
context.bezierCurveTo(30,0,80,0,50,30)
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();
</script>
</body>
7. 선그려서 도형만들기
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(50,100);
context.lineTo(50,150);
context.lineTo(100,200);
context.lineTo(150,200);
context.lineTo(200,150);
context.lineTo(200,100);
context.lineTo(150,50);
context.lineTo(100,50);
context.fill();
</script>
</body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(50,100);
context.lineTo(75,50);
context.lineTo(100,100);
context.fillStyle = "green"
context.fill();
context.moveTo(75,120);
context.lineTo(100,60);
context.lineTo(50,60);
context.fillStyle = "green"
context.fill();
</script>
8. 글자적기
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font='italic 38pt Arial'
context.fillText('Hellow World!', 50, 80);
</script>
</body>
9. 그라데이션 만들기
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var gradient = context.createLinearGradient(100,60,200,100);
gradient.addColorStop(0, "yellow");
gradient.addColorStop(1, "red");
context.fillStyle = gradient;
context.fillRect(10,10,200,100);
</script>
</body>
10. 파일을 이용하여 패턴 만들기
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var image = new Image();
image.src = "pattern.png";
image.onload = function (){
var pattern = context.createPattern(image, "repeat");
context.rect(0,0, canvas.width, canvas.height);
context.fillStyle = pattern;
context.fill();
};
</script>
</body>
11. 이미지 링크 이용하여 이미지 불러오기
<body>
<canvas id="myCanvas" width="500" height="300"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var image = new Image();
image.src = "https://img.danawa.com/prod_img/500000/147/615/img/14615147_1.jpg?shrink=330:*&_v=20220426173016";
image.onload = function () {
context.drawImage(image, 0,0);
};
</script>
</body>
12. 평행이동
<body>
<canvas id="myCanvas" width="500" height="300"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = 'blue';
context.fillRect(0,0,100,100);
context.translate(100,20);
context.fillStyle = 'red';
context.fillRect(0,0,140,100);
</script>
</body>
13. Bouncing Ball
<style>
canvas {
background: yellow;
border: 1px dotted black;
}
</style>
<script>
var context;
var dx = 5;
var dy = 5;
var y = 100;
var x = 100;
function draw() {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.clearRect(0,0,300,200);
context.beginPath();
context.fillStyle="red";
context.arc(x,y,20,0,Math.PI*2, true);
context.closePath();
context.fill();
if (x<(0+20) || x>(300-20))
dx = -dx;
if (y<(0+20) || y>(200-20))
dy = -dy;
x += dx;
y += dy;
}
setInterval(draw,10);
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>
'HTML' 카테고리의 다른 글
| JavaScript로 만드는 공 넣기 게임 (0) | 2023.05.11 |
|---|---|
| 자바스크립트 JS 콜백함수 그리고 반복문으로 별 트리 찍기 (0) | 2023.05.09 |
| float랑 위치 잡는거 연습 (0) | 2023.04.21 |
| 0414 HTML CSS 실습 (0) | 2023.04.20 |
| 0413 HTML CSS 실습 (0) | 2023.04.14 |
