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