canvas 动态绘制矩形

WX20200720-110636@2x.png
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>绘制矩形的动态案例</title>
</head>
<body>
<canvas id="canvas" width="1000px" height="600px"></canvas>
<script>
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    /*
      TODO 编写需求
      TODO * 绘制空心矩形(sotrkeRect(x,y,width,height))
      TODO   * 颜色(strokeStyle)随机
      TODO   * 大小(width,height)随机
      TODO     * 0 < width < canvas.width
      TODO     * 0 < height < canvas.height
      TODO * 每 500ms 绘制一次
     */
    setInterval(function(){
        var r = Math.floor(Math.random()*255);/* 0 ~ 255 */
        var g = Math.floor(Math.random()*255);
        var b = Math.floor(Math.random()*255);
        context.strokeStyle = "rgb("+r+","+g+","+b+")";
        var x = Math.random()*canvas.width;/* 0 ~ canvas.width */
        var y = Math.random()*canvas.height;/* 0 ~ canvas.height */
        var width = Math.random()*(canvas.width-x);/* 0 ~ (canvas.width-x) */
        var height = Math.random()*(canvas.height-y);/* 0 ~ (canvas.height-y) */
        context.strokeRect(x,y,width,height);
    },1000);
</script>
</body>
</html>```