<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> canvas { border: 2px dotted #ddd } </style> </head> <body> <canvas id="canvas1" width="400" height="400"></canvas> <canvas id="canvas2" width="400" height="400"></canvas> <script> var canvas1 = document.getElementById('canvas1') var context1 = canvas1.getContext('2d') function randomFromTo(from, to) { return Math.floor(Math.random() * (to - from) + from) } function Circle(x, y, radius, color) { this.x = x this.y = y this.radius = radius this.color = color this.isSelected = false } var circles = [] function addRandomCircle() { var radius = randomFromTo(10, 60) var x = randomFromTo(0, canvas1.width) var y = randomFromTo(0, canvas1.height) var colors = ['green', 'blue', 'red', 'yellow', 'magenta', 'orange', 'brown', 'purple', 'pink'] var color = colors[randomFromTo(0, 8)] var circle = new Circle(x, y, radius, color) circles.push(circle) } function drawCircles() { context1.clearRect(0, 0, canvas1.width, canvas1.height) context1.globalAlpha = 0.85 context1.strokeStyle = 'black' for (var i = 0, l = circles.length; i < l; i++) { var circle = circles[i] if (circle.isSelected) { context1.lineWidth = 5 } else { context1.lineWidth = 1 } context1.beginPath() context1.arc(circle.x, circle.y, circle.radius, 0, Math.PI*2) context1.fillStyle = circle.color context1.fill() context1.stroke() } } var previousSelectedCircle = null function canvasClick(e) { var clickX = e.pageX - canvas1.offsetLeft var clickY = e.pageY - canvas1.offsetTop for (var i = circles.length; i > 0; i--) { var circle = circles[i - 1] var distanceFromCenter = Math.sqrt(Math.pow(circle.x - clickX, 2) + Math.pow(circle.y - clickY, 2)) if (distanceFromCenter <= circle.radius) { if (previousSelectedCircle != null) { previousSelectedCircle.isSelected = false } previousSelectedCircle = circle circle.isSelected = true drawCircles() return } } } addRandomCircle() addRandomCircle() addRandomCircle() addRandomCircle() addRandomCircle() addRandomCircle() addRandomCircle() addRandomCircle() drawCircles() canvas1.onclick = canvasClick var canvas2 = document.getElementById('canvas2') var context2 = canvas2.getContext('2d') var squarePosition_y = 0 var squarePosition_x = 10 function drawFrame() { context2.clearRect(0, 0, canvas2.width, canvas2.height) context2.beginPath() context2.rect(squarePosition_x, squarePosition_y, 10, 10) context2.lineStyle = 'black' context2.lineWidth = 1 context2.stroke() if (squarePosition_y > canvas2.height) { squarePosition_y = 0 } else { squarePosition_y += 1 } setTimeout('drawFrame()', 20) } setTimeout('drawFrame()', 20) </script> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <canvas id="canvas" width="600" height="400" style="border:1px solid #ddd;"></canvas> <button id="add">Add Ball</button> <button id="clear">Clear Canvas</button> <input id="ballSize" type="number"> <input id="connectedBalls" type="checkbox"> Connect Balls <script> function Ball(x, y, dx, dy, radius) { this.x = x this.y = y this.dx = dx this.dy = dy this.radius = radius this.color = 'red' } var balls = [] function addBall() { var radius = parseFloat(document.getElementById('ballSize').value) var ball = new Ball(50, 50, 1, 1, radius) balls.push(ball) } function clearBall() { balls = [] } document.getElementById('add').onclick = addBall document.getElementById('clear').onclick = clearBall var canvas = document.getElementById('canvas') var context = canvas.getContext('2d') setTimeout('drawFrame()', 20) function drawFrame() { context.clearRect(0, 0, canvas.width, canvas.height) context.beginPath() for (var i = 0; i < balls.length; i++) { var ball = balls[i] ball.x += ball.dx ball.y += ball.dy if (ball.y < canvas.height) ball.dy += 0.22 ball.dx = ball.dx * 0.998 if ((ball.x + ball.radius > canvas.width) || (ball.x - ball.radius < 0)) { ball.dx = -ball.dx } if ((ball.y + ball.radius > canvas.height) || (ball.y - ball.radius < 0)) { ball.dy = -ball.dy * 0.96 } if (!document.getElementById('connectedBalls').checked) { context.beginPath() context.fillStyle = ball.color } else { context.fillStyle = 'white' } context.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2) context.lineWidth = 1 context.fill() context.stroke() } setTimeout('drawFrame()', 20) } </script> </body> </html>