SVG & Canvas动态画矩形

SVG

<svg style="width: 700px;height: 400px;">
    <rect x="20" y="20" width="50" height="200" fill="red">
        <animate attributeName="height" from="120" to="200" begin="0s" dur="1.1s" />
    </rect>
</svg>

Canvas

html:
<canvas id="canvas" width='500' height="500">
        <P>you browser not support canvas!</P>
</canvas>
js:
window.onload = function () {
    let canvas = document.getElementById('canvas'); //获取canvas元素
    let context = canvas.getContext('2d'); //获取画图环境，指明为2d
    let realHight = 200;
    let height = realHight * 0.5;

    (function drawFrame() {
        if (height >= 200) {
            return;
        } else {
            height = height * 1.01;
            window.requestAnimationFrame(drawFrame);
            context.beginPath();
            context.fillStyle = 'blue';
            context.fillRect(20, 20, 50, height);
            context.restore();
        }
    }());
}