SVGとキャンバスのアニメーション

<svg width="200" height="100">
    <rect x="10" y="10" width="50" height="50" fill="blue" />
</svg>
                    

const canvasStaticRect = document.getElementById('canvas-static-rect').getContext('2d');
canvasStaticRect.fillStyle = 'blue';
canvasStaticRect.fillRect(10, 10, 50, 50);
                    

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" fill="green" />
</svg>
                    

const canvasStaticCircle = document.getElementById('canvas-static-circle').getContext('2d');
canvasStaticCircle.fillStyle = 'green';
canvasStaticCircle.beginPath();
canvasStaticCircle.arc(50, 50, 40, 0, Math.PI * 2);
canvasStaticCircle.fill();
                    

<svg width="200" height="100">
    <rect x="10" y="10" width="30" height="30" fill="blue">
        <animate attributeName="x" from="10" to="150" dur="2s" repeatCount="indefinite" />
    </rect>
</svg>
                    

const canvasTranslationLR = document.getElementById('canvas-translation-lr').getContext('2d');
function drawTranslationLR(time) {
    canvasTranslationLR.clearRect(0, 0, 200, 100);
    canvasTranslationLR.fillStyle = 'blue';
    const x = 10 + (time % 200);
    canvasTranslationLR.fillRect(x, 10, 30, 30);
}
function animateLR() {
    const time = performance.now() / 10;
    drawTranslationLR(time);
    requestAnimationFrame(animateLR);
}
animateLR();
                    

<svg width="100" height="200">
    <rect x="10" y="10" width="30" height="30" fill="blue">
        <animate attributeName="y" from="10" to="150" dur="2s" repeatCount="indefinite" />
    </rect>
</svg>
                    

const canvasTranslationUD = document.getElementById('canvas-translation-ud').getContext('2d');
function drawTranslationUD(time) {
    canvasTranslationUD.clearRect(0, 0, 100, 200);
    canvasTranslationUD.fillStyle = 'blue';
    const y = 10 + (time % 200);
    canvasTranslationUD.fillRect(10, y, 30, 30);
}
function animateUD() {
    const time = performance.now() / 10;
    drawTranslationUD(time);
    requestAnimationFrame(animateUD);
}
animateUD();
                    

<svg width="100" height="100">
    <rect x="25" y="25" width="50" height="50" fill="green">
        <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="4s" repeatCount="indefinite" />
    </rect>
</svg>
                    

const canvasRotation = document.getElementById('canvas-rotation').getContext('2d');
function drawRotation(time) {
    canvasRotation.clearRect(0, 0, 100, 100);
    canvasRotation.save();
    canvasRotation.translate(50, 50);
    canvasRotation.rotate(time * Math.PI / 180);
    canvasRotation.fillStyle = 'green';
    canvasRotation.fillRect(-25, -25, 50, 50);
    canvasRotation.restore();
}
function animateRotation() {
    const time = performance.now() / 10;
    drawRotation(time);
    requestAnimationFrame(animateRotation);
}
animateRotation();
                    

<svg width="100" height="100">
    <rect x="25" y="25" width="50" height="50" fill="red" transform-origin="50 50">
        <animateTransform attributeName="transform" type="scale" from="1" to="2" begin="0s" dur="2s" repeatCount="indefinite" />
    </rect>
</svg>
                    

const canvasScaling = document.getElementById('canvas-scaling').getContext('2d');
function drawScaling(time) {
    canvasScaling.clearRect(0, 0, 100, 100);
    canvasScaling.save();
    canvasScaling.translate(50, 50);
    let scale = 1 + Math.sin(time * Math.PI / 180);
    canvasScaling.scale(scale, scale);
    canvasScaling.fillStyle = 'red';
    canvasScaling.fillRect(-25, -25, 50, 50);
    canvasScaling.restore();
}
function animateScaling() {
    const time = performance.now() / 1000;
    drawScaling(time);
    requestAnimationFrame(animateScaling);
}
animateScaling();
                    

<svg width="100" height="100">
    <rect x="25" y="25" width="50" height="50" fill="purple">
        <animate attributeName="opacity" from="1" to="0" dur="2s" repeatCount="indefinite" />
    </rect>
</svg>
                    

const canvasOpacity = document.getElementById('canvas-opacity').getContext('2d');
function drawOpacity(time) {
    canvasOpacity.clearRect(0, 0, 100, 100);
    canvasOpacity.globalAlpha = Math.abs(Math.sin(time * Math.PI / 180));
    canvasOpacity.fillStyle = 'purple';
    canvasOpacity.fillRect(25, 25, 50, 50);
    canvasOpacity.globalAlpha = 1;
}
function animateOpacity() {
    const time = performance.now() / 1000;
    drawOpacity(time);
    requestAnimationFrame(animateOpacity);
}
animateOpacity();
                    

<svg width="100" height="100">
    <rect x="25" y="25" width="50" height="50" fill="orange">
        <animate attributeName="fill" from="orange" to="blue" dur="2s" repeatCount="indefinite" />
    </rect>
</svg>
                    

const canvasColorChange = document.getElementById('canvas-color-change').getContext('2d');
function drawColorChange(time) {
    canvasColorChange.clearRect(0, 0, 100, 100);
    canvasColorChange.fillStyle = `rgba(${Math.abs(Math.sin(time * Math.PI / 180)) * 255}, 165, 0, 1)`;
    canvasColorChange.fillRect(25, 25, 50, 50);
}
function animateColorChange() {
    const time = performance.now() / 1000;
    drawColorChange(time);
    requestAnimationFrame(animateColorChange);
}
animateColorChange();