SHstation SHstation

DOCTYPE html> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillText("으아아아아아아아아아안녕하세요 이건 모두 같은 글!", 50, 50); // 글씨는 (100,100) 위치에 표시 ctx.fillText("으아아아아아아아아아안녕하세요 이건 모두 같은 글!", 50, 80, 100); //폭만 다르게 ctx.fillText("으아아아아아아아아아안녕하세요 이건 모두 같은 글!", 50, 110, 200); ctx.fillText("으아아아아아아아아아안녕하세요 이건 모두 같은 글!", 50, 140, 300); ctx.fillText("으아아아아아아아아아안녕하세요 이건 모두 같..

DOCTYPE html> //이미지 그리기(원래 크기대로) var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var myPic = new Image(); //이미지 변수 선언 myPic.src = "images/flower_s.jpg"; //이미지 경로 설정 myPic.onload = function () { //이미지 로드 ctx.drawImage(myPic, 10, 10); //이미지 그리기 //context.drawImage(img(이미지 소스 넘기기), x(x좌표), y(y좌표)); } 결과: DOCTYPE html> //이미지 그리기(크기 변형) var canvas = document.getEl..

DOCTYPE html> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var flower = new Image(); //이미지 함수 선언 flower.src = "images/flower_s.jpg"; //이미지 소스의 위치 지정 flower.onload = function() { //이미지 로드 var pattern = ctx.createPattern(flower, "repeat"); //패턴으로 채운다. //context.createPattern(image(이미지 소스 넘긴다.), "repeat/repeat-x/repeat-y/no-repeat"); // repeat: 패턴을 반복해서 채움, r..

DOCTYPE html> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); //Gradient로 내부 채우기 var grad = ctx.createLinearGradient(50,50,250,50); //context.createdLinearGradient(x0(시작하는 점의 x좌표), y0(시작하는 점의 y좌표), x1(끝나는 점의 x좌표), y1(끝나는 점의 y좌표)) grad.addColorStop(0, "red"); //색 지정 grad.addColorStop(1/6,"orange"); grad.addColorStop(2/6,"yellow"); grad.addColorStop(3/6,"green"..

DOCTYPE html> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); //사각형 ctx.lineWidth = 10; //선의 두께를 지정한다 ctx.strokeStyle = "red"; // 선의 색을 지정한다 ctx.fillStyle = "magenta"; //내부에 채워질 색상을 지정한다 //fillStyle = color/hex/rgba()/gradient/pattem ctx.fillRect(20,20,200,200); //내부가 채워질 사각형을 그린다(지정) ctx.lineJoin = "bevel"; //꼭짓점 - miter:각진 모양(기본값), round:둥근 모양, bevel: 잘려나간 ..

DOCTYPE html> CANVAS를 지원하지 않습니다. //head에 똑같이 썼을 때 실행이 되지 않았다. 이유는 모르겠다. var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); //getContext() 함수에 2d를 그린다고 선언 -> ctx변수에 적용 context.beginPath(); //선그리기를 시작한다.(경로를 초기화한다) context.moveTo(100,50); //시작점으로 이동한다 context.lineTo(300,50); //선의 끝점으로 이동한다 context.lineTo(300,200); context.lineTo(100,200); context.lineTo(100,50..

자바스크립트는 이벤트에 반응할 수 있습니다. 버튼을 누르면 이 요소의 내용이 변경됩니다. 숫자를 입력하시오 사진을 클릭하여 보세요!

현재시간: 마지막 11번은 화면이 바뀌는 것을 보기 위해 내 마음대로 문제를 살짝 바꿈