HTML5画布元素canvas提供的API使用方法

Html5画布元素canvas提供操作布局和画布元素呈现的属性和方法的接口。 Html5画布元素canvas接口也继承了HtmlElement接口的属性和方法。

 
 
 

 Html5画布元素canvas的属性：

 htmlcanvaselement.height
 是一个正整数，反映了CSS属性中画布元素的高度。如果未指定属性，或将其设置为无效值，如负值，则使用默认值150。
 htmlcanvaselement.mozopaque
 是一个布尔值，反映了这是一个不透明的HTML属性的<canvas>元素。它让画布知道是或者不是半透明。如果画布知道不是透明度，绘画可以优化性能。
 htmlcanvaselement.width
 是一个正整数，它反映了CSS中画布元素的宽度。如果未指定属性，或将其设置为无效值，如负值，则使用默认值300。
 htmlcanvaselement.mozprintcallback
 是一个最初空的函数，web内容可以将其设置为一个JavaScript函数，如果页面被重绘，它将被调用。
 

Html5画布元素canvas的方法：

  htmlcanvaselement.capturestream()
 返回一个canvascapturemediastream，是一种在画布上的实时视频捕获。
 htmlcanvaselement.getcontext()
 返回画布上的绘图上下文，如果不支持上下文id，则返回null。绘图上下文允许您在画布上绘制。“2D”返回一个canvasrenderingcontext2d对象调用getContext，返回一个webglrenderingcontext对象。这种情况下只有在实现WebGL的浏览器。
 htmlcanvaselement.todataurl()
 返回包含由类型参数指定的格式（默认为PNG）格式的图像表示的数据URL。返回的图像在分辨率96dpi。
 htmlcanvaselement.toblob()
 创建一个表示画布中包含的图像的团块对象；该文件可以在磁盘上缓存，或者在用户代理的权限下存储在内存中。
 htmlcanvaselement.transfercontroltooffscreen()
 将控制转移到一个offscreencanvas对象，无论是在主线程或工人。
 htmlcanvaselement。mozgetasfile()
 返回表示画布中包含的图像的文件对象；该文件是基于内存的文件，具有指定名称。如果没有指定类型，则图像类型为图像/ PNG。
 

Html5画布元素canvas浏览器兼容性

 
 

特点	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support (2D context)	4.0	(Yes)	3.6 (1.9.2)	9.0	9.0 [1]	3.1
toBlob()	50	No support	19 (19) [2]	?	?	No support(bug 71270)
probablySupportsContext(), setContext(), transferControlToProxy()	No support	?	No support	No support	No support	No support
mozGetAsFile()	No support	No support	4.0 (2)	No support	No support	No support
captureStream()	No support	No support	41 (41)	No support	No support	No support
transferControlToOffscreen()	No support	No support	44 (44) [3]	No support	No support	No support