今天无意中发现，webgl在不是正方形的绘图区域会出现图形拉扯变形，这种情况有没有人知道怎么解决吗？为啥这不能自适应屏幕呢？

例如，我在500*500的绘图区域图形显示是正常的：

<script>const canvas = document.getElementById("canvas");  canvas.width = 500;canvas.height =500;const gl = canvas.getContext("webgl");const VSHADER_SOURCE = `attribute vec4 a_Position;void main(){gl_Position=a_Position;}`;const FSHADER_SOURCE = `precision mediump float;void main (){gl_FragColor = vec4(1.0,0.0,0.0,1.0);}`const program = initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE);const data = new Float32Array([ 0.0, 0.5,-0.5, 0,0.0, 0.0])const buffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, buffer);gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);const a_Position = gl.getAttribLocation(program, "a_Position");gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);gl.enableVertexAttribArray(a_Position);gl.clearColor(0.0, 1.0, 1.0, 1.0);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.LINE_LOOP, 0, 3);function loadShader(gl, type, source) {const shader = gl.createShader(type);gl.shaderSource(shader, source);gl.compileShader(shader);return shader;}function initShaders(gl, vsource, fsource) {const program = gl.createProgram();const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsource);const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsource);gl.attachShader(program, vertexShader);gl.attachShader(program, fragmentShader);gl.linkProgram(program);gl.useProgram(program);gl.program = program;return program;}</script>



但是我把绘图区域改为铺满整个屏幕之后，三角形就出现拉扯变形了：


<script>const canvas = document.getElementById("canvas"); canvas.width = window.innerWidth;canvas.height =window.innerHeight;const gl = canvas.getContext("webgl");const VSHADER_SOURCE = `attribute vec4 a_Position;void main(){gl_Position=a_Position;}`;const FSHADER_SOURCE = `precision mediump float;void main (){gl_FragColor = vec4(1.0,0.0,0.0,1.0);}`const program = initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE);const data = new Float32Array([ 0.0, 0.5,-0.5, 0,0.0, 0.0])const buffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, buffer);gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);const a_Position = gl.getAttribLocation(program, "a_Position");gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);gl.enableVertexAttribArray(a_Position);gl.clearColor(0.0, 1.0, 1.0, 1.0);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.LINE_LOOP, 0, 3);function loadShader(gl, type, source) {const shader = gl.createShader(type);gl.shaderSource(shader, source);gl.compileShader(shader);return shader;}function initShaders(gl, vsource, fsource) {const program = gl.createProgram();const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsource);const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsource);gl.attachShader(program, vertexShader);gl.attachShader(program, fragmentShader);gl.linkProgram(program);gl.useProgram(program);gl.program = program;return program;}</script>


												


											

webgl 图形在不是正方形的绘图区域出现拉扯变形相关推荐
	

    
								
  1. 学废了系列 - WebGIS vs WebGL图形编程
		
    前工作中有不少涉及到地图的项目,我参加了几次技术评审,前端伙伴们在 WebGIS 方面的知识储备稍有不足,这次分享的主要目的是科普一些在前端领域比较常用的 WebGIS 知识.另外,我之前的工作中积攒 ...
    
		
    2. 
						
  2. webgl图形平移、缩放、旋转
		
    文章目录 前言 平移 图示 代码示例 缩放 图示 代码示例 旋转 公式推导 代码示例 总结 前言 在webgl中将图形进行平移.旋转.缩放的操作称为变换或仿射变换,图形的仿射变换涉及到顶点位置的修改, ...
    
		
    3. 
						
  3. webgl图形绘制流程
		
    文章目录 前言 webgl基本环境搭建 webgl上下文 gl.clearColor().gl.clear() canvas填充示例 着色器绘制图形 着色器使用流程 封装初始化着色器代码 开始绘制 g ...
    
		
    4. 
						
  4. 十一. 图形、图像与多媒体1.绘图基础
		
    要在平面上显示文字和绘图,首先要确定一个平面坐标系.Java语言约定,显示屏上一个长方形区域为程序绘图区域,坐标原点(0,0)位于整个区域的左上角.一个坐标点(x,y)对应屏幕窗口中的一个像素,是整数 ...
    
		
    5. 
						
  5. Java图形 图像与多媒体基础,十一. 图形、图像与多媒体1.绘图基础
		
    要在平面上显示文字和绘图,首先要确定一个平面坐标系.Java语言约定,显示屏上一个长方形区域为程序绘图区域,坐标原点(0,0)位于整个区域的左上角.一个坐标点(x,y)对应屏幕窗口中的一个像素,是整数 ...
    
		
    6. 
						
  6. 如何对CAD绘图区域进行设置？
		
    如何对CAD绘图区域进行设置呢?其实设置绘图区域也就是设置边界.也就是图纸的最大极限值,那么该如何快速设置CAD绘图区域?详细教程如下. 1.运行CAD制图工具,进入软件操作界面.打开需要进行编辑的C ...
    
		
    7. 
						
  7. TeeChart for .NET教程：如何设置图表绘图区域的颜色？
		
        TeeChart for .NET图表组件库提供数百种2D和3D图形样式,54种运算和统计函数以及无限数量的坐标轴和14工具箱供你选择.该图表控件还可以有效地用于创建多任务的仪表板. Q:我查 ...
    
		
    8. 
						
  8. echarts - 条形图grid设置距离绘图区域的距离
		
    在一些数据量过大的情况下,在一个固定的区域绘图往往需要对图表绘制区域的大小进行动态改变.这时候设置条形图距离绘图区域上下左右的距离可使用如下方式:表示条形图的柱子距离绘图区左边30%,距离右边40%, ...
    
		
    9. 
						
  9. R语言可视化散点图（scatter plot）图中的标签和数据点互相堆叠丑死了，ggrepel包来帮忙：文本标签（label）相互排斥，远离数据点，远离绘图区域的边缘。
		
    R语言可视化散点图(scatter plot)图中的标签和数据点互相堆叠丑死了,ggrepel包来帮忙:文本标签(label)相互排斥,远离数据点,远离绘图区域的边缘. 目录
    
		
    10. 
		


					

最新文章
	

    
						
  1. 做了一个系列的Android开发教程列表
		
    2. 
						
  2. Spring MVC 之拦截器（八）
		
    3. 
						
  3. 大神开车的标题-python中类方法、类实例方法、静态方法的使用与区别
		
    4. 
						
  4. mysql nosql 同步_使用canal和canal_mysql_nosql_sync同步mysql数据
		
    5. 
						
  5. 最小生成树和最短路径
		
    6. 
						
  6. 阿里云飞天洛神2.0：高性能网络软硬一体化技术实践
		
    7. 
						
  7. Linux：查看内存和CPU信息
		
    8. 
						
  8. php的limit分页,用php数组的array_slice分页和用limit查询分页哪个效率更高？
		
    9. 
						
  9. 【牛客网】——字符串的旋转
		
    10. 
						
  10. MySQL数据库规范及解读
		
    11. 
						
  11. Android 快捷键
		
    12. 
						
  12. asp.net937-图书馆座位管理系统
		
    13. 
						
  13. 带壳破解SMC补丁技术
		
    14. 
						
  14. java中的约瑟夫问题_Java 解决约瑟夫问题
		
    15. 
						
  15. 利用MATLAB解特征方程，并画出特征根的分布，便于分析系统的稳定性
		
    16. 
						
  16. TI/德州仪器 SN74AHC1G04DBVR 单路反向器闸
		
    17. 
						
  17. 【Linux系列文章】软件包管理
		
    18. 
						
  18. iOS开发之GameCenter使用
		
    19. 
						
  19. 玩转微信营销和推广的10种方法和技巧
		
    20. 
						
  20. 【卡特兰数】【高精】WZK打雪仗(war)
		
    21. 
		

	


热门文章
	

    
									
  1. java并发编程第五课 并发锁讲解一
			
    2. 
						
  2. 勤哲excel服务器与oracle集成,勤哲Excel服务器-学习与下载园地 Excel Server是由勤哲软件于2003年发明的。...
			
    3. 
						
  3. 客户端请求服务器的协议,电骡协议规范-第二章-客户端和服务器TCP通讯
			
    4. 
						
  4. asp.net连锁酒店预定管理系统VS开发sqlserver数据库web结构C#编程
			
    5. 
						
  5. 去大厂面试又栽了，败在了算法的理论面试...
			
    6. 
						
  6. 基于Django以及requests爬虫的音乐网站
			
    7. 
						
  7. NIO实现网络聊天室
			
    8. 
						
  8. 2012年10月3日
			
    9. 
						
  9. 怎样写商业英文信(2) -- 描述事情
			
    10. 
						
  10. 大四老学狗跌跌撞撞找工作的经验之谈
			
    11.