Animation javascript dans page web
1) Etape 1
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Branche simple</title>
<style>
body {
margin: 0;
background: #f4f4f4;
}
canvas {
display: block;
margin: auto;
background: white;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
const ctx = document.getElementById('canvas').getContext('2d');
ctx.strokeStyle = 'green';
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(200, 400);
ctx.lineTo(200, 300);
ctx.stroke();
</script>
</body>
</html>
2) Etape 2:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Arbre Fractal Statique</title>
<style>
body {
margin: 0;
background: #e0f7fa;
}
canvas {
display: block;
margin: auto;
background: white;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
function drawBranch(x, y, len, angle, depth) {
if (depth === 0) return;
const x2 = x + len * Math.cos(angle);
const y2 = y + len * Math.sin(angle);
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x2, y2);
ctx.stroke();
drawBranch(x2, y2, len * 0.7, angle - 0.5, depth - 1);
drawBranch(x2, y2, len * 0.7, angle + 0.5, depth - 1);
}
ctx.strokeStyle = 'brown';
ctx.lineWidth = 2;
drawBranch(300, 600, 100, -Math.PI / 2, 6);
</script>
</body>
</html>
3) Etape 3
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Arbre Fractal Animé</title>
<style>
html, body {
margin: 0;
overflow: hidden;
background: #000;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize);
resize();
let t = 0;
function drawBranch(x, y, len, angle, depth) {
if (depth === 0) return;
const x2 = x + len * Math.cos(angle);
const y2 = y + len * Math.sin(angle);
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x2, y2);
ctx.stroke();
const spread = 0.5 + 0.2 * Math.sin(t);
drawBranch(x2, y2, len * 0.7, angle - spread, depth - 1);
drawBranch(x2, y2, len * 0.7, angle + spread, depth - 1);
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = 'lightgreen';
ctx.lineWidth = 2;
drawBranch(canvas.width / 2, canvas.height, canvas.height / 5, -Math.PI / 2, 8);
t += 0.02;
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
4) Etape 4
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Arbre Fractal Élégant</title>
<style>
html, body {
margin: 0;
background: black;
overflow: hidden;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let width, height;
function resize() {
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize);
resize();
let angleOffset = 0;
function drawBranch(x, y, len, angle, depth) {
if (depth === 0) return;
const x2 = x + len * Math.cos(angle);
const y2 = y + len * Math.sin(angle);
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x2, y2);
ctx.stroke();
const nextLen = len * 0.7;
const spread = 0.5 + 0.2 * Math.sin(angleOffset);
drawBranch(x2, y2, nextLen, angle - spread, depth - 1);
drawBranch(x2, y2, nextLen, angle + spread, depth - 1);
}
function animate() {
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.fillRect(0, 0, width, height);
ctx.strokeStyle = `hsl(${angleOffset * 60 % 360}, 100%, 70%)`;
ctx.lineWidth = 2;
drawBranch(width / 2, height, height / 4, -Math.PI / 2, 9);
angleOffset += 0.01;
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
Commentaires
Enregistrer un commentaire