#网页动画# 最简单的网页canvas动画

最简单的网页canvas动画
一个最简单的网页画布动画。

demo地址、西瓜视频地址、哔哩哔哩地址

<!--
    作者:那么的宋健
    原贴地址:https://songjian.name/html/1
    发布时间:2021-01-18
-->
 
<!-- 画布默认内外像素300*150 -->
<canvas></canvas>
 
<script>
 
    //获取画布dom对象
    let canvas = document.querySelector("canvas");
 
    //获取画布上下文对象
    let context = canvas.getContext("2d");
 
    //矩形左上角x坐标
    let x = 0;
 
    //函数自调用
    (function draw(){
 
        //画出一个矩形 4个参数分别：左上x坐标，左上y坐标，矩形宽度，矩形高度
        //不断的画出宽5高50的矩形 间隙是5
        context.fillRect(x+=10, 50, 5, 50);
 
        //当屏幕完成一帧刷新后，再执行当前draw函数。
        requestAnimationFrame(draw);
 
    })();
 
</script>