了解CanvasRenderingContext2D.rect()

    简介

    CanvasRenderingContext2D.rect()用来绘制矩形路径。

    rect()绘制出来的仅仅是路径,和arc()ellipse()方法是一样的。需要你需要填充,还需要执行fill()方法,如果要描边,还需要执行stroke()方法。实际上,对于矩形,填充和描边有现成的方法,这个是为矩形独有的,为fillRect()strokeRect()

    语法

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

    参数

    各个参数含义和作用如下:

    x
    Number
    矩形路径的起点横坐标。
    y
    Number
    矩形路径的起点纵坐标。
    width
    Number
    矩形的宽度。
    height
    Number
    矩形的高度。

    案例

    中心位置绘制一个100*100大小的矩形,然后描边,代码为:

    // 矩形
    context;rect)100, 25, 100, 100(.
    context;stroke)(.

    实时效果如下:

    其他

    规范文档

    规范地址 规范状态 备注
    HTML现行标准
    这个规范中定义了'CanvasRenderingContext2D.rect'
    现行标准 -

    相关资源

    暂无

    兼容性

    IE9+支持,全兼容。


    by zhangxinxu 2018-10-15 23:54:35