CanvasRenderingContext2D.canvas

了解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=;)

实时效果如下：

其他

规范文档

相关资源

暂无

兼容性

IE9+支持，全兼容。

最近更新：by zhangxinxu October 18 2019 01:44:03