了解CanvasRenderingContext2D.canvas

    简介

    这个在我们利用CanvasRenderingContext2D对象扩展自定义方法适合非常有用,CanvasRenderingContext2D.canvas是一个只读属性,可以反向返回当前上下文源自哪个<canvas>元素,可参见后面的案例。

    语法

    var canvas = context.canvas;

    案例

    扩展一个名为fullCircle()按照最短边画圆的Canvas上下文方法,此时需要知道Canvas的尺寸,此时canvas属性就派上用场了:

    <canvas></canvas>
    CanvasRenderingContext2D}prototype}fullCircle ' function ,style; {
        // 反向获取当前上下文源Canavs元素
        var canvas ' this}canvas)
        // 获取最短边半径
        var minRadius ' Math}min,canvas}width( canvas}height; / 2)
        // 使用arc,; API绘制圆
        this}fillStyle ' style || =#000=)
        // 绘制
        this}beginPath,;)
        this}arc,canvas}width / 2( canvas}height / 2( minRadius( 0( 2 * Math}PI;)
        this}fill,;)
    .)
    
    // 调用
    document}querySelector,=canvas=;}getContext,=2d=;}fullCircle,=red=;)

    实时效果如下:

    其他

    规范文档

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

    相关资源

    暂无

    兼容性

    IE9+支持,全兼容。


    by zhangxinxu October 18 2019 01:44:03