사용자:Riemann/testplugin
이 플러그인에 대한 설명문서는 사용자:Riemann/testplugin/설명문서에서 만들 수 있습니다.
$("#wa").append('<canvas id="can" width="500" height="500">Alt text</canvas>'); var c = document.getElementById("can"); var ctx = c.getContext("2d"); var Earth = {}; Earth.x = 250; Earth.y = 250; Earth.draw = function() { ctx.beginPath(); ctx.fillStyle = 'gray'; ctx.arc(this.x, this.y, 50, 0, 2 * Math.PI); ctx.fill(); } var You = {}; You.x = 250; You.y = 250; var mouseX; var mouseY; document.addEventListener("mousemove", mouseMoveHandler, false); function mouseMoveHandler(e) { mouseX = e.clientX - $("#can").offset().left; mouseY = e.clientY - $("#can").offset().top; } You.draw = function() { ctx.beginPath(); ctx.fillStyle = 'black'; ctx.arc(this.x, this.y, 10, 0, 2 * Math.PI); ctx.fill(); } You.update = function() { event = new MouseEvent("mouse"); var bdry = c.getBoundingClientRect(); norm = Math.sqrt( Math.pow(mouseX - 250, 2) + Math.pow(mouseY - 250, 2)); this.x = 250 + 50 * (mouseX - 250) / norm; this.y = 250 + 50 * (mouseY - 250) / norm; } function Asteroid(x, y, dx, dy) { this.x = x; this.y = y; this.dx = dx; this.dy = dy; } Asteroid.prototype.draw = function() { ctx.beginPath(); ctx.fillStyle = 'gray'; ctx.arc(this.x, this.y, 20, 0, 2 * Math.PI); ctx.fill(); } Asteroid.prototype.update = function() { this.x += this.dx; this.y += this.dy; } var asterList = [] function loop() { ctx.fillStyle = 'rgb(240, 240, 240)'; ctx.fillRect(0, 0, 500, 500); while (asterList.length < 5) { var aster = new Asteroid(Math.floor(460 * Math.random()) + 20, Math.floor(460 * Math.random()) + 20, Math.random(), Math.random() ); asterList.push(aster); } for (var i = 0; i < asterList.length; i++) { asterList[i].draw(); asterList[i].update(); } Earth.draw(); You.draw(); You.update(); requestAnimationFrame(loop); } loop();