Convas
웹에다가 그림을 그릴거여요
웹은 하나의 도화지다
캔버스다
졸리다
어휴
<body>
<h2>canvas태그</h2> <!--크기들은 꼭 속성으로 주셈! 스타일로 주면 안 됨!-->
<canvas id="canvas" width=200px; height=200px style="background-color: yellow ;"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(0,0); // 왼쪽 맨 위 부터 시작
ctx.lineTo(50,50);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.lineWidth = 10;
ctx.moveTo(50,50);
ctx.lineTo(100,50);
ctx.stroke();
ctx.closePath();
ctx.beginPath(); // 굳이 안써도
ctx.lineWidth = 5;
ctx.moveTo(100,50);
ctx.lineTo(100,100);
ctx.stroke();
ctx.closePath(); // 얘도 굳이
//rgba에서 a는 알파 즉 투명도(1에 가까울 수록 완전 불투명,0에 가까울 수록 완전투명)
ctx.fillStyle='rgba(255,0,0,0.5)';
ctx.fillRect(100,100,50,50) // 시작꼭지점(100,100),가로,세로 이 값임!
</script>
</body>
2.글자를 그려볼거예요
글자를 그린다고요?
녜
글자도 그려요
보세요
<body>
<h2>canvas태그</h2>
<canvas id="canvas" width="200"; height="200" style="background-color: yellow ;"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
ctx.font = '25px 굴림체'
//채우기 색상
ctx.fillStyle='blue';
//기준선 보이기
ctx.strokeStyle = 'red';
ctx.moveTo(50,20);
ctx.lineTo(50,180);
ctx.stroke();
//그림자 표시 설정
ctx.shadowColor = 'rgba(192,192,192,0.8)';
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowBlur = 1; // 최대값이 100
//글자그리기
ctx.textAlign = 'start';
ctx.fillText('HTML5_START',50,50);
ctx.textAlign = 'end';
ctx.fillText('HTML5_END',50,80);
ctx.textAlign = 'center';
ctx.fillText('HTML5_CENTER',50,110);
ctx.textAlign = 'left';
ctx.fillText('HTML5_LEFT',50,140);
ctx.textAlign = 'right';
ctx.fillText('HTML5_RIGHT',50,170);
</script>
</body>
3.캔버스에다가 그림도 그려요
그림 안에 그림이요?
녜
보세요
<script>// 자바스크립트가 canvas위에있으니까 밑에거 null 값나오니
window.addEventListener('DOMContentLoaded',function(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
ctx.strokeStyle='red';
ctx.moveTo(60,313);
ctx.lineTo(120,166);
ctx.lineTo(180,76);
ctx.lineTo(240,256);
ctx.lineTo(300,70);
ctx.lineTo(360,200);
ctx.lineTo(420,120);
ctx.lineTo(480,70);
ctx.stroke();
//이미지 그리기용
var canvas = document.getElementById("canvasimg");
ctx = canvasimg.getContext('2d');
var img = new Image(); // html의<img/> 랑 같음
// console.log(img);
img.src = "./Images/button.jpg";
img.onload=function(){
// 이미지 크기 그대로 그림 (그대로 가져 온다고)
//ctx.drawImage(img,0,0); //img는 드래그 되는데 여기선 드래그가 안 됨
// 내맴대로 크기조절가능
ctx.drawImage(img,0,0,100,50);
};
});
</script>
</head>
<body>
<h2>canvas태그</h2>
<canvas id="canvas" width="550"; height="450" style="background-color: yellow ;"></canvas><br/>
<canvas id="canvasimg" width="300"; height="300" style="border:1px green solid ;"></canvas>
</body>
'학원 > HTML5' 카테고리의 다른 글
| 11/08 38-2 [HTML] WebStorage_2(세션 스토리지) (0) | 2022.11.08 |
|---|---|
| 11/08 38-1 [HTML] WebStorage_1(로컬 스토리지) (0) | 2022.11.08 |
| 10/31 32-5 [HTML] video (0) | 2022.10.31 |
| 10/31 32-4 [HTML] Audio (0) | 2022.10.31 |
| 10/31 32-3 [HTML] fieldSet & address (0) | 2022.10.31 |