----------------멀티미디어태그.html
<!--
모든 웹 브라우저에서 동영상 파일을 재생하려면 h.264방식의 mp4 형식 파일을 사용해야한다.
※h.264방식의 mp4형식 파일은 다음 팟 인코더로 쉽게 생성할 수 있다.
비디오 태그의 옵션
src(비디오 파일의 경로 지정), poster(비디오 파일을 불러오기 전 표시할 이미지의 경로 지정
src="비디오 파일 경로", poster="이미지 파일 경로"
preload(비디오를 재생하기 전에 데이터를 모두
불러올지 여부 지정), autoplay(비디오의 자동 재생 여부를 지정), loop(비디오의 반복 재생 여부를 지정), controls(비디오 재생 도구의 표현여부를 지정), muted(음소거 여부를 지정)
-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>멀티미디어 태그</title>
</head>
<body>
<video src="./media/dew.mp4" muted autoplay controls> </video>
<!--비디오 태그의 크로스 브라우징(웹 브라우저 호환성 작업)-->
<video muted autoplay controls>
<source src="./media/dew.mp4" type="video/mp4" >
<source src="./media/dew.webm" type="video/webm" >
</video>
</body>
</html>
----------------------------------------------canvas를 이용한 선 그리기 html파일
<!--
함수를 호출(함수의 기능을 사용)하는 문법: 함수명( )
매서드를 호출하는 문법: Obj.매서드명( )
-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>캔버스 태그</title>
<style>
#canvasbox { background: coral; border: 5px solid cornflowerblue; }
#imgbox { width: 600px; height: 400px; background: #ccc; }
</style>
</head>
<!--onload 속성으로 HTML 문서를 모두 해석하면 init( )함수를 호출한다.-->
<body onload="init( )">
<!--박스의 이름은 class 속성과 id 속성을 사용하여 붙인다.
id 속성은 자바스크립트 또는 제이쿼리에 관련된 박스의 이름을 붙일 때 사용하며, 이름의 중복을 허용하지 않는다.-->
<canvas id="can" width="500" height="300"></canvas>
<canvas id="canvasbox" width="800" height="500"></canvas>
<canvas id="imgbox"></canvas>
<script src="./js/custom.js"></script>
</body>
</html>
----------------------------------------------canvas를 이용한 선 그리기 js파일
// JavaScript Document
//함수 정의 문법: function 함수명( ) { 명령어; }
// init 함수를 정의
function init( ) {
// document(HTML문서)에서 get(얻는다) Element(요소: 시작태그+웹콘텐츠+끝태그) ById(id 속성으로)
// 변수(variable) 선언은 메모리상에 데이터를 저장할 공간을 만들고 이름을 지정하는 것이다.
var canvas = document.getElementById("can");
var canbox = document.getElementById("canvasbox");
var imgbox = document.getElementById("imgbox");
//아이디명이 can인 요소를 선택하여 변수 canvas에 저장한다. canvas 변수에 저장된 값을 사용할 때는 변수명으로 사용한다.
var ctx = canvas.getContext("2d");
var ctbox = canbox.getContext("2d");
var ibox = imgbox.getContext("2d");
//그래픽을 그리는 요소를 지정: 2d는 2차원, wedg1 은 3차원
// draw(ctx); 요소를 2차원으로 그린다.
var centerX = canbox.width / 1.5;
var centerY = canbox.height / 2;
var radius = 150;
ctx.beginPath( ); //시작 좌표를 설정
ctbox.beginPath( );
ctx.moveTo(0, 0); //x축과 y축 좌표:0으로 부터
ctx.lineTo(250, 150); //x축 좌표:250, y축 좌표:150 까지
ctx.moveTo(250, 150);
ctx.lineTo(500, 0);
ctx.lineWidth = 10; //선의 두께를 10px로 설정.
ctx.strokeStyle = "pink"; //선의 색상 설정.
ctx.stroke( ); //선을 긋는다.
//Math.PI(Math 클래스의 PI상수값은 3.14(파이)값이다.)
ctbox.arc(centerX, centerY, radius, 0, 2 * Math.PI, false );
//x축좌표,y축좌표,원의 지름,시작 파이값, 끝 파이값, 모드
ctbox.fillStyle="#36f";
ctbox.strokeStyle="pink";
ctbox.lineWidth=10;
ctbox.fill( );
ctbox.stroke( );
ctbox.beginPath( );
ctbox.rect(50, 50, 50, 400);
ctbox.rect(150, 200, 200, 100);
//직사각형 x축좌표, y축좌표, 사각형의 너비값, 사각형의 높이값
ctbox.fillStyle="pink"
ctbox.fill( );
var imgObj = new Image( ); //이미지 객체를 생성해서 imgObj변수에 저장한다.
imgObj.src="./imgs/shiba.jpg";
//함수명이 없는 함수를 익명함수라고 한다. 익명함수는 무조건 실행한다.
imgObj.onload = function ( ) {
ibox.drawImage(imgObj, 20, 20);
};
var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");
ctx.beginPath( );
ctx.moveTo(0, 0);
ctx.lineTo(0,300);
ctx.moveTo(0, 300);
ctx.lineTo(500, 300);
ctx.moveTo(500, 300);
ctx.lineTo(500, 0);
ctx.moveTo(500, 0);
ctx.lineTo(0, 0);
ctx.lineWidth = 20;
ctx.strokeStyle = "pink"
ctx.stroke( );
}
//변수:이름으로 값을 사용
//메서드:이름으로 기능(명령어의 묶음)을 사용 arc( ); 매개변수
//class Arc{}
'Coding' 카테고리의 다른 글
| html 선수학습(7) (0) | 2021.07.09 |
|---|---|
| html 선수학습(6) (0) | 2021.07.08 |
| html 선수학습(4) (0) | 2021.07.06 |
| html 선수학습(3) (0) | 2021.07.05 |
| html 선수학습(2) (0) | 2021.07.01 |