563day(绘制矩形.html)

最新推荐文章于 2025-07-14 23:10:37 发布

原创最新推荐文章于 2025-07-14 23:10:37 发布 · 141 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用HTML5的Canvas API绘制矩形，并演示了fillRect方法的应用，同时展示了如何清除画布上的内容。

《2019年4月20日》【连续 563天】

标题：绘制矩形.html；
内容：

 var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*绘制矩形路径 不是独立路径*/
    /*ctx.rect(100,100,200,100);
    ctx.fillStyle = 'green';
    ctx.stroke();
    ctx.fill();*/

    /*绘制矩形  有自己的独立路径*/
    //ctx.strokeRect(100,100,200,100);
    ctx.fillRect(100,100,200,100);

    /*清除矩形的内容*/
    ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);

    //ctx.fillRect(100,100,200,100);