<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Interactive Art</title>
</head>
<body>
<canvas id="mycanvas" width="500" height="250">
Canvasに対応したブラウザを使ってください。
</canvas>
<script>
(function() {
'use strict';
var canvas;
var ctx;
var Ball;
var balls = [];
canvas = document.getElementById('mycanvas');
if (!canvas || !canvas.getContext) return false;
ctx = canvas.getContext('2d');
function rand(min, max) {
return min + Math.floor(Math.random() * (max - min + 1));
}
canvas.addEventListener('click', function(e) {
var x, y, r;
var rect;
rect = e.target.getBoundingClientRect();
x = e.clientX - rect.left;
y = e.clientY - rect.top;
r = rand(0, 100) < 20 ? rand(50, 80) : rand(10,35);
balls.push(new Ball(x, y, r));
});
Ball = function(x, y, r) {
this.x = x;
this.y = y;
this.r = r;
this.vx = rand(-10, 10);
this.vy = rand(-10, 10);
this.color = 'hsla(' + rand(50, 100) +', ' + rand(40, 80) + '%, ' + rand(50, 60) + '%, ' + Math.random() + ')';
this.draw = function() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, Math.PI*2);
ctx.fillStyle = this.color;
ctx.closePath();
ctx.fill();
};
this.move = function() {
if (this.x + this.r > canvas.width || this.x - this.r < 0) {
this.vx *= -1;
}
if (this.y + this.r > canvas.height || this.y - this.r < 0) {
this.vy *= -1;
}
this.x += this.vx;
this.y += this.vy;
}
};
function update() {
var i;
ctx.fillStyle = '#ecf0f1';
ctx.fillRect(0, 0, canvas.width, canvas.height);
for (i = 0; i < balls.length; i++) {
balls[i].draw();
balls[i].move();
}
setTimeout(function() {
update();
}, 30);
}
update();
})();
</script>
</body>
</html>
【おさかなび-osakanav-】では、この記事の感想！おさかなへの応援メッセージ！おさかなに聞きたい事、質問！記事にしてほしい内容！などを大募集中！
「氏名」「メールアドレス」「内容」の3点をご記入の上「osakana1699@gmail.com」までご応募ください！
