HTMLCanvasElement.getContext() - Web API 接口参考| MDN

"webgl" (或 "experimental-webgl" ) 这将创建一个 WebGLRenderingContext 三维渲染上下文对象。

只在实现WebGL 版本1(OpenGL ES 2.0)的浏览器上可用。

" webgl2 " (或 " ... SkiptomaincontentSkiptoselectlanguageWeb开发技术WebAPI接口参考HTMLCanvasElementHTMLCanvasElement.getContext()ArticleActions中文(简体)ThispagewastranslatedfromEnglishbythecommunity.LearnmoreandjointheMDNWebDocscommunity.语法例子规范浏览器兼容性另请参阅RelatedTopicsCanvasAPIHTMLCanvasElement属性height mozOpaquewidth方法 captureStream()getContext() mozFetchAsStream()(en-US) mozGetAsFile()(en-US)toBlob()toDataURL() transferControlToOffscreen()Eventswebglcontextlost继承HTMLElementElementNodeEventTargetRelatedpagesforCanvasAPICanvas(en-US)CanvasGradientCanvasImageSourceCanvasPatternCanvasRenderingContext2DImageBitmapImageBitmapFactoriesImageBitmapRenderingContextImageDataOffscreenCanvasPath2DTextMetrics语法例子规范浏览器兼容性另请参阅HTMLCanvasElement.getContext() HTMLCanvasElement.getContext() 方法返回canvas的上下文，如果上下文没有定义则返回null. 在同一个canvas上以相同的contextType多次调用此方法只会返回同一个上下文。

语法varctx=canvas.getContext(contextType); varctx=canvas.getContext(contextType,contextAttributes);参数 上下文类型（contextType） 是一个指示使用何种上下文的DOMString。

可能的值是: "2d",建立一个CanvasRenderingContext2D二维渲染上下文。

"webgl"(或"experimental-webgl")这将创建一个 WebGLRenderingContext三维渲染上下文对象。

只在实现WebGL版本1(OpenGLES2.0)的浏览器上可用。

"webgl2"(或 "experimental-webgl2")这将创建一个WebGL2RenderingContext三维渲染上下文对象。

只在实现WebGL版本2(OpenGLES3.0)的浏览器上可用。

"bitmaprenderer"这将创建一个只提供将canvas内容替换为指定ImageBitmap功能的ImageBitmapRenderingContext 。

注意:标识符"experimental-webgl"或"experimental-webgl2"用于新WebGL的实现。

这些实现还没有达到测试套件一致性或图形驱动程序平台局势尚不稳定。

KhronosGroup集团认证WebGL实现在某些一致性规则。

上下文属性(contextAttributes) 你可以在创建渲染上下文的时候设置多个属性，例如: canvas.getContext("webgl", {antialias:false, depth:false}); 2d上下文属性: alpha:boolean值表明canvas包含一个alpha通道.如果设置为false,浏览器将认为canvas背景总是不透明的,这样可以加速绘制透明的内容和图片. (Geckoonly)willReadFrequently:boolean值表明是否有重复读取计划。

经常使用getImageData()，这将迫使软件使用2Dcanvas并 节省内存（而不是硬件加速）。

这个方案适用于存在属性 gfx.canvas.willReadFrequently的环境。

并设置为true (缺省情况下,只有B2G/FirefoxOS). (Blinkonly)storage:string这样表示使用哪种方式存储(默认为：持久（"persistent"）). WebGL上下文属性: alpha:boolean值表明canvas包含一个alpha缓冲区。

antialias:boolean值表明是否开启抗锯齿。

depth:boolean值表明绘制缓冲区包含一个深度至少为16位的缓冲区。

failIfMajorPerformanceCaveat:表明在一个系统性能低的环境是否创建该上下文的boolean值。

powerPreference:指示浏览器在运行WebGL上下文时使用相应的GPU电源配置。

可能值如下: "default":自动选择，默认值。

"high-performance":高性能模式。

"low-power":节能模式。

premultipliedAlpha:表明排版引擎将假设绘制缓冲区包含预混合alpha通道的boolean值。

preserveDrawingBuffer:如果这个值为true缓冲区将不会被清除，会保存下来，直到被清除或被使用者覆盖。

stencil:表明绘制缓冲区包含一个深度至少为8位的模版缓冲区boolean值。

返回值RenderingContext返回值是下列之一： CanvasRenderingContext2D为 "2d", WebGLRenderingContext为"webgl"和"experimental-webgl", WebGL2RenderingContext为"webgl2"和"experimental-webgl2",或者 ImageBitmapRenderingContext为"bitmaprenderer". 如果contextType不是上述之一，返回null.例子定义元素: 通过如下代码可以获取canvas2d 上下文: varcanvas=document.getElementById("canvas"); varctx=canvas.getContext("2d"); console.log(ctx);//CanvasRenderingContext2D{...} 现在你已经获取到了2D画布的渲染上下文(CanvasRenderingContext2D)，可以使用它画你想画的了.规范 Specification Status Comment HTMLLivingStandardHTMLCanvasElement.getContext LivingStandard Nochangesincethelatestsnapshot,HTML5 HTML5.1HTMLCanvasElement.getContext Recommendation   HTML5HTMLCanvasElement.getContext Recommendation SnapshotoftheHTMLLivingStandardcontainingtheinitialdefinition. 浏览器兼容性BCDtablesonlyloadinthebrowser另请参阅 HTMLCanvasElement. OffscreenCanvas.getContext()(en-US) 可用的上下文:CanvasRenderingContext2D,WebGLRenderingContext和WebGL2RenderingContextand ImageBitmapRenderingContext. Foundaproblemwiththispage?EditonGitHubSourceonGitHubReportaproblemwiththiscontentonGitHubWanttofixtheproblemyourself?SeeourContributionguide.Lastmodified:Mar8,2022,byMDNcontributors