web (18) 썸네일형 리스트형 Linear Tween Your browser does not support HTML5 Motion, Tweening and Easing Three key components of a motion 1. Position 2. Time 3. Beginning Position Key components of a Tweenis 1. Duration 2. Final position Position and time have this one-to-one relationship. Position is a function of time. p = f(t) Easing is acceleration, a change is speed. 1. Ease-In : start slow and speed up 2. Ease-Out : start fast and speed down 3. Ease-In-Out : The first half of the tween is an .. HTML5 마우스 다운 이벤트 - 다운시 도형 변경 function addEvent2(config) { var event = window.event; var canvas = config.canvas; var context = config.context; var left = config.left; var top = config.top; var size = config.size; var type = 0; canvas.addEventListener("mousedown", function(event){ var canvasPos = getCanvasPos(canvas); var mouseX = event.clientX - canvasPos.left + window.pageXOffset; var mouseY = event.clientY - canvasPos.top .. HTML5 마우스 다운 이벤트 - context.isPointInPath()로 체크 function addEvent(config) { var event = window.event; var canvas = config.canvas; var context = config.context; var left = config.left; var top = config.top; var size = config.size; canvas.addEventListener("mousedown", function(event){ var canvasPos = getCanvasPos(canvas); var mouseX = event.clientX - canvasPos.left + window.pageXOffset; var mouseY = event.clientY - canvasPos.top + window.pageYO.. HTML5 마우스 다운 이벤트 - 사각형 영역 체크 function drawRect() { var canvas = document.getElementById("drawERCanvas"); var context = canvas.getContext("2d"); var size = 100; var left = (canvas.width - size) * 0.5; var top = (canvas.height - size) * 0.5; context.beginPath(); context.fillStyle = "#EF8B47"; context.rect(left, top, size, size); context.fill(); context.font = "12pt Calibri"; context.fillStyle = "black"; context.fillText("down.. HTML5 원 그리기 function drawCircle() { var canvas = document.getElementById("drawCCanvas"); var context = canvas.getContext("2d"); var left = (canvas.width - 200) * 0.5; var top = canvas.height * 0.1; var size = 200; context.beginPath(); context.arc(left + size * 0.5, top + size * 0.5, size * 0.3, 0, Math.PI * 2, true); context.fillStyle = "salmon"; context.fill(); } HTML5 사각형 그리기 function drawRect() { var canvas = document.getElementById("drawRCanvas"); var context = canvas.getContext("2d"); var left = (canvas.width - 200) * 0.5; var top = canvas.height * 0.1; var size = 200; context.beginPath(); context.fillStyle = "blue"; context.rect(left + size * 0.2, top + size * 0.2, size * 0.6, size * 0.6); context.fill(); } HTML5 삼각형 그리기 function drawTriangle() { var canvas = document.getElementById("drawTCanvas"); var context = canvas.getContext("2d"); var left = (canvas.width - 200) * 0.5; var top = canvas.height * 0.1; var size = 200; context.beginPath(); context.fillStyle = "green"; context.moveTo(left + size * 0.5, top + size * 0.2); context.lineTo(left + size * 0.8, top + size * 0.8); context.lineTo(left + size * 0.2, top .. 이전 1 2 3 다음