고니의 코딩노트

HTML5의 요소를 이용해서 웹브라우저에 직접 그림을 그리거나 이미지 등을 출력할 수 있습니다. 다음 코드는 HTML5의 캔버스에 도형을 그리고 키보드의 상하좌우 키를 이용해서 도형을 움직이는 자바스크립트 코드입니다. (자바스크립트) HTML5 캔버스: 키보드로 이미지 움직이기 이전에 작성했던 키보드로 도형을 움직이는 코드를 도형 대신에 이미지로 변경해 봤습니다. (자바스크립트) HTML5 캔버스: 키보드로 도형 움직이기 HTML5의 요소를 이용해서 웹브라우저에 직접 그 gonyzany.tistory.com

HTML5의 요소와 자바스크립트로 움직이는 도형을 만드는 코드입니다. 이 코드는 캔버스에 가로로 이동하는 크기가 다른 세 개의 원을 만듭니다. 도형은 캔버스의 벽에 닿으면 반대 반향으로 다시 움직입니다.

HTML5의 요소로 원을 그리는 자바스트립트 코드입니다. 반지름과 원의 중심 좌표를 조정하여 원의 크기나 위치를 변경할 수 있습니다. 원의 내부를 채우기 위해서는 아래의 코드를 추가하면 됩니다. // 도형이 내부를 채운다. cts.fill(); 특정 색상으로 채우기 위해서는 fillStyle 속성을 사용합니다. // 내부를 파란색으로 채우기 위해 fillStyle 설정 ctx.fillStyle = 'blue';

HTML5에서 지원하는 태그에 마우스를 움직여서 그림을 그리는 코드입니다. 캔버스에 그림을 그리는 코드는 자바스크립트를 사용합니다.

HTML5에서 지원하는 기능으로 이미지를 출력하는 자바스크립트 코드입니다. 캔버스에 이미지를 꽉 채우기 위해서는 아래와 같이 코드를 수정하면 됩니다. context.drawImage(img, 0, 0, canvas.width, canvas.height);

다음 코드는 HTML5의 를 이용해서 선을 그리는 javascript 코드입니다. 캔버스: 선 그리기

HTML5에서 캔버스(canvas) 기능이 도입되었습니다. 이 기능을 이용해서 웹 브라우저에 직접 2D 그래픽을 출력할 수 있습니다. 다음 코드는 캔버스 기능을 이용해서 웹브라우저에 사각형을 그리는 간단한 코드입니다. 캔버스: 사각형 그리기 캔버스: 사각형 그리기 위 코드에서 2번째 사각형에 투명도를 설정하여 출력하였습니다.

다음 코드는 구구단을 맞추는 자바스크립트 코드입니다. 종료는 prompt 에서 [취소] 버튼을 누르면 됩니다. 구구단 맞추기 실행했을 때의 결과 화면입니다. 문제를 출력합니다. 입력한 값이 정답이면 "맞았습니다!"를 출력합니다. 입력한 값이 틀리면 아래와 같이 출력합니다. [취소] 버튼을 누르면 종료합니다. Math.random() 0부터 1 사이의 임의의 실수 생성 Math.floor(a) 실수 a를 정수로 변환

자바스크립트에서 배열을 사용하는 2가지 방법에 관한 간단한 예제입니다. 1. [ ]로 배열 만들기 자바스크립트 배열 2. Array 객체 사용하기 자바스크립트 배열

키보드에서 입력한 값을 배열에 저장하고 배열에서 최대값과 최소값을 구하는 자바 프로그램입니다. import java.util.Scanner; public class Ex { public static void main(String[] args) { Scanner scanner = new Scanner(System.in); int intArray[] = new int[5]; int max, min; System.out.println("정수 5개 입력"); for(int i=0; i