• 技术文章 > web前端 > H5教程

    fillRect方法怎么使用

    不言 不言 2019-02-12 13:27:34 原创 493
    fillRect是HTML5中的方法,可以用于在画布上绘制已填充的矩形,默认的填充颜色是黑色,下面我们就来看一看fillRect方法的具体使用。

    HTML5

    我们先来看一下fillRect的基本语法

    context.fillRect(x,y,width,height);

    x表示矩形左上角的 x 坐标。

    y表示矩形左上角的 y 坐标。

    width表示矩形的宽度。

    height表示矩形的高度。

    (参考:HTML5 canvas

    下面我们来看具体的示例

    代码如下

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <body>
        <canvas id="rectangle" width="200" height="200"></canvas>
        <script>
        // 使用JS获取canvas元素
            var canvas=document.getElementById('rectangle');
            // 获取canvas
            var c=canvas.getContext('2d');
            // 在画布上绘制一个矩形
            c.fillRect(50,50,100,100);
        </script>
    </body>
    </html>

    效果如下:绘制了一个填充黑色的矩形

    微信截图_20190211171414.png

    本篇文章到这里就全部结束了,更多有关前端的精彩内容大家可以关注PHP中文网的其他相关栏目教程!!!

    以上就是fillRect方法怎么使用的详细内容,更多请关注php中文网其它相关文章!

    第七期线上培训班
    专题推荐: fillRect
    上一篇:html5能做什么 下一篇:stroke方法怎么使用

    相关文章推荐

    • 如何利用input事件来监听移动端的输入_html5教程技巧 • 深入解析HTML5 Canvas控制图形矩阵变换的方法_html5教程技巧 • 实例讲解使用SVG制作loading加载动画的方法_html5教程技巧 • 实例讲解利用HTML5 Canvas API操作图形旋转的方法_html5教程技巧 • 使用HTML5 Canvas为图片填充颜色和纹理的教程_html5教程技巧

    全部评论我要评论

  • 取消 发布评论 发送
  • PHP中文网