라라리라

FpsTest.html DOCTYPE html> Document FpsTest.js function drawCanvas(){ cnt.clearRect(0, 0, myCanvas.width , myCanvas.height); draw(); if(turn == true){ x += speed; if(x == myCanvas.width - width) { if(y == myCanvas.height - height) turn = !turn; else{ x = 0; y += height; } } } else { x -= speed; if(x == 0){ if(y == 0) turn = !turn; else{ x = myCanvas.width - width; y -= height; } } } } function d..

clicktest.html DOCTYPE html> Document clicktest.js function drawcircle(){ cnt.beginPath(); cnt.rect(x, y, 30, 30); cnt.fillStyle = "yellow"; cnt.stroke(); cnt.fill(); cnt.closePath(); } //======================================================== let myCanvas = document.querySelector(`#myCanvas`); let cnt = myCanvas.getContext(`2d`); let x = 0; let y = 0; let count = 0; window.addEventListener(`cl..

clickDrawArc.html DOCTYPE html> Document 화면을 클릭해보세요. clickDrawArc.js function drawArc(){ ctx.beginPath(); ctx.arc(x, y, radius, 0, angle); ctx.fillStyle = "blue"; ctx.fill(); ctx.closePath(); } //------------------------------------------------- let canvas = document.getElementById("myCanvas"); let ctx = canvas.getContext("2d"); console.log("캔버스 왼쪽 여백 = " + ctx.canvas.offsetLeft); console.log("캔..

grid.html DOCTYPE html> Document grid.js /* 오목판(그리드) 만들기(10 * 10) */ function drawGrid(){ ctx.beginPath(); let originX = 100; // 시작위치 let originY = 100; // 시작위치 let lineGap = 50; // 그리드 간격 let lineCount = 10; // 선 개수 조절 // 세로 그리기 for(let i = 0; i 100 / 150/ 200/ 250...... let startY = originY; //100; let endX = startX; //100 + 50 * i; let endY = lineGap * (lineCount - 1) + originY; // 50 * 9 + 1..

canvas테스트.html DOCTYPE html> Document canvas테스트.js //============================= let canvas = document.querySelector(`#mycanvas`); let ctx = canvas.getContext("2d"); mycanvas.html DOCTYPE html> Document mycanvas.js //------------------------------------------------- let canvas = document.getElementById("myCanvas"); let ctx = canvas.getContext("2d"); line.html DOCTYPE html> Document line.js fun..

_cartInfo.html DOCTYPE html> Document #cartTable { margin: 0 auto; width: 1050px; } .check_box input[type='checkbox'] + label{ display: inline-block; cursor: pointer; } .check_box input[type='checkbox'] + label::before{ display: inline-block; content: ""; width: 24px; height: 24px; background: url(./img/check-off.png) no-repeat; background-size: 24px; vertical-align: top; margin: -4px 5px 0 0; }..

index.html DOCTYPE html> Document main.js import { ControllerMain } from "./controllerMain.js"; import { JsonDiary } from "./jsonDiary.js"; JsonDiary.getInstance().start(); ControllerMain.getInstance().start(); jsonDiary.js export class JsonDiary { static intstance = new JsonDiary(); static getInstance() { return this.intstance; } start() { this.diaryList = null; this.setSampleData(); } setSampl..

index.html DOCTYPE html> Document controllerMain.js import { PageHeader } from "./pageHeader.js"; import { PageIndex } from "./pageIndex.js"; import { PageMemberJoin } from "./pageMemberJoin.js"; import { PageMemberList } from "./pageMemberList.js"; import { PageMemberLogin } from "./pageMemberLogin.js"; import { PageBoardList } from "./pageBoardList.js"; import { PageBoardInfo } from "./pageBoa..