canvas中的getContext()方法以及webgl中的 ... - 腾讯云

contextAttributes参数可传递多个参数集合用来创建渲染上下文：. 例如：canvas.getContext('webgl', { antialias: false, depth: false });. contextType ... 腾讯云备案控制台云+社区专栏视频精选问答沙龙云+竞赛团队主页开发者手册腾讯云TI平台TVP实验室搜索搜索关闭创作写文章发视频提问登录注册展开腾讯云·社区登录首页专栏视频精选问答沙龙云+竞赛团队主页开发者手册腾讯云TI平台TVP返回腾讯云官网acoolgiser149篇文章canvas中的getContext()方法以及webgl中的getContext()方法转到我的清单专栏首页acoolgiser_zhuanlancanvas中的getContext()方法以及webgl中的getContext()方法30分享分享文章到朋友圈分享文章到QQ分享文章到微博复制文章链接到剪贴板海报分享海报分享canvas中的getContext()方法以及webgl中的getContext()方法发布于2019-01-1710:23:53阅读1.7K0一、getContext()方法翻译自：https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext语法：canvas.getContext(contextType,contextAttributes);varctx=canvas.getContext（contextType）; varctx=canvas.getContext（contextType，contextAttributes）;复制contextType参数有以下四种：“2d”,创建一个CanvasRenderingContext2D对象作为2D渲染的上下文。

“webgl”(或“experimental-webgl”),创建一个WebGLRenderingContext对象作为3D渲染的上下文，只在实现了WebGL2的浏览器上可用，实验性特性。

“webgl2”,创建一个WebGL2RenderingContext对象作为3D渲染的上下文，只在实现了WebGL3的浏览器上可用。

“bitmaprenderer”，创建一个ImageBitmapRenderingContext，用于将位图渲染到canvas上下文上，实验性特性。

contextAttributes参数可传递多个参数集合用来创建渲染上下文：例如：canvas.getContext('webgl',{antialias:false, depth:false}); contextType为’2d’时的context属性：alpha（boolean)：表示canvas是否包含一个alpha通道，设为false则浏览器知道背景永远不透明，能加速对于透明场景和图像的绘制。

willReadFrequently（Boolean）：表示是否计划有大量的回读操作，频繁调用getImageData()方法时能节省内存，仅Gecko内核浏览器支持。

storage（String）：声明使用的storage类型，默认为”persistent”。

contextType为‘WebGL’时的context属性：alpha：Boolean类型，指示画布是否包含alpha缓冲区。

antialias：Boolean类型，指示是否执行抗锯齿。

depth：Boolean类型，表示绘图缓冲区的深度缓冲区至少为16位。

failIfMajorPerformanceCaveat：Boolean类型，指示如果系统性能较低，是否创建上下文。

powerPreference：对用户代理的提示，指示GPU的哪种配置适合WebGL上下文。

可能的值是：       “default”：让用户代理决定哪种GPU配置最合适。

这是默认值。

      “高性能”：优先考虑渲染性能而不是功耗。

      “低功耗”：优先考虑节能而不是渲染性能。

premultipliedAlpha：Boolean类型，表示页面合成器将假定绘图缓冲区包含具有预乘alpha的颜色。

preserveDrawingBuffer：如果值为true，则不会清除缓冲区并保留其值，直到作者清除或覆盖。

stencil：Boolean类型，表示绘图缓冲区具有至少8位的模板缓冲区。

二、WebGLRenderingContext接口中的 getContext()翻译自：https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContextWebGLRenderingContext接口为HTML 元素的绘图表面提供了OpenGLES2.0图形渲染上下文的接口。

为了获得用于2D和/或3D图形渲染的WebGL上下文的访问，调用getContext()一对元素，提供“WebGL的”作为参数：varcanvas=document.getElementById('myCanvas'); vargl=canvas.getContext('webgl');复制获得画布的WebGL渲染上下文后，可以在其中进行渲染。

三、WebGL2RenderingContext接口中的getContext()翻译自：https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContextWebGL2RenderingContext接口提供了一个HTML的纸面的OpenGLES3.0呈现上下文的元素。

要获得此接口的对象，调用getContext()一对元素，提供“webgl2”作为参数：varcanvas=document.getElementById('myCanvas'); vargl=canvas.getContext('webgl2');复制WebGL2是WebGL1的扩展。

该WebGL2RenderingContext接口实现了WebGLRenderingContext接口的所有成员。

当在WebGL2上下文中使用时，WebGL1上下文的某些方法可以接受其他值。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！本文分享自作者个人站点/博客：https://blog.csdn.net/acoolgiser复制如有侵权，请联系[email protected]删除。

展开阅读全文HTML举报点赞3分享登录后参与评论0条评论Canvas的HelloWorld文本的样式文本的测量总结孙亖HTML5学习总结（四）——canvas绘图、WebGL、SVG一、Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascriptAPI，它可以实现在网页中完成动态的2D与3D图像技...张果WebGL2系列之从WebGL1迁移到WebGL2WebGL2并非所有的浏览器都支持，所以比较鲁棒的方式是，判断如果不存在WebGL2上下文，则回退使用WebGL1，代码如下：用户3158888HTML5绘画与拖放事件在html5中出现了许多新的特性，绘画功能就是其中之一。

由于html5新增的这些新特性，所以也在逐渐取代Flash，毕竟Flash比较占用内存，也经常性奔溃。

端碗吹水Canvashttp://www.w3c.org/TR/2dcontext/ https://html.spec.whatwg.org/jinghongAndroid遇到的一些小问题UE希望调整文本行间距，原来只记得有lineSpacing的属性，而且只能调整行间距的倍数。

None_LingAndroid自定义按周签到打卡功能实例代码之前实现过《Android可签到的日历控件》的功能，跟这篇一样都是实现签到打卡功能，这篇实现的是按月进行打卡做标识，本篇内容实现的按周进行签到打卡。

砸漏Android自定义实现按周签到打卡功能之前实现过《Android可签到的日历控件》的功能，跟这篇一样都是实现签到打卡功能，这篇实现的是按月进行打卡做标识，本篇内容实现的按周进行签到打卡。

SoullessCoderHTML5-Canvas初探（1）双愚Canvas系列（1）：直线图形在前端最令人兴奋的技术莫过于Canvas技术。

它可以制作出更加绚丽的效果，甚至完全可以胜任游戏开发。

最近我也在学习Canvas相关的技术，总是想拿出来跟大家一起...kai666666Canvas2D画线和面1.Html中的画布2.渲染上下文3.画一个方块4.画一条线孙亖Android自定义View实现地铁显示牌效果砸漏Android开发实现绘制淘宝收益图折线效果示例本文实例讲述了Android开发实现绘制淘宝收益图折线效果。

分享给大家供大家参考，具体如下：砸漏android实现淘宝收益图的折线实现的效果我一会贴上，我先说下原理，我们知道要实现在canvas上画线，不就是要搞一个paint嘛，然后首先肯定要设置下paint的属性，那么画文字呢，不就是T...xiangzhihongH5的canvas绘图技术canvas元素是HTML5中新添加的一个元素，该元素是HTML5中的一个亮点。

Canvas元素就像一块画布，通过该元素自带的API结合JavaScript代码...小周sri的码农24.QtQuickQML-Canvas和Context2D详解1.Canvas介绍 Canvas是一个允许绘制直线和曲线、简单和复杂的形状、图形和引用的图形图像。

它还可以添加文本、颜色、阴影、渐变和图案，并执行低级别像素操...张诺谦更多文章acoolgiser关注专栏文章149阅读量277.8K获赞401作者排名556腾讯云原生专题云原生技术干货，业务实践落地。

视频公开课上线啦Vite学习指南，基于腾讯云Webify部署项目立即查看腾讯云自媒体分享计划入驻云加社区，共享百万资源包。

立即入驻广告关闭目录一、getContext()方法二、WebGLRenderingContext接口中的 getContext()三、WebGL2RenderingContext接口中的getContext()社区专栏文章阅读清单互动问答技术沙龙技术快讯团队主页开发者手册腾讯云TI平台活动原创分享计划自媒体分享计划邀请作者入驻自荐上首页在线直播生态合作计划资源技术周刊社区标签开发者实验室关于视频介绍社区规范免责声明联系我们友情链接归档问题归档专栏文章归档快讯文章归档关键词归档开发者手册归档开发者手册Section归档云+社区扫码关注云+社区领取腾讯云代金券热门产品域名注册云服务器区块链服务消息队列网络加速云数据库域名解析云存储视频直播热门推荐人脸识别腾讯会议企业云CDN加速视频通话图像分析MySQL数据库SSL证书语音识别更多推荐数据安全负载均衡短信文字识别云点播商标注册小程序开发网站监控数据迁移Copyright©2013-2022TencentCloud.AllRightsReserved.腾讯云版权所有京公网安备11010802017518粤B2-20090059-1扫描二维码扫码关注云+社区领取腾讯云代金券