首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何修改此WebGL drawImage等效项,使其不清除绘制在透明图像下的像素?

WebGL的drawImage方法是用于在画布上绘制图像的函数。默认情况下,它会清除绘制在透明图像下的像素。如果要修改这个行为,可以通过以下步骤来实现:

  1. 创建一个新的WebGL纹理对象,并将其绑定到画布上的一个纹理单元上。
  2. 将透明图像绘制到这个纹理对象上。
  3. 在绘制之前,将绘制目标的混合模式设置为不清除已有像素的模式。
  4. 使用drawImage方法将纹理对象绘制到画布上。

下面是一个示例代码,展示了如何修改WebGL的drawImage等效项,使其不清除绘制在透明图像下的像素:

代码语言:txt
复制
// 获取WebGL上下文
const gl = canvas.getContext('webgl');

// 创建一个新的纹理对象
const texture = gl.createTexture();

// 将纹理对象绑定到纹理单元0
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);

// 设置纹理参数
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

// 加载透明图像到纹理对象
const image = new Image();
image.onload = function() {
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);

  // 设置混合模式为不清除已有像素的模式
  gl.enable(gl.BLEND);
  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

  // 绘制纹理对象到画布上
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
};
image.src = 'transparent_image.png';

在这个示例中,我们首先创建一个新的纹理对象,并将其绑定到纹理单元0上。然后,我们加载透明图像到纹理对象上,并设置纹理参数。接下来,我们启用混合模式,并将其设置为不清除已有像素的模式。最后,我们使用drawArrays方法将纹理对象绘制到画布上。

这样修改后,WebGL的drawImage等效项就不会清除绘制在透明图像下的像素了。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

前端canvas基础复习,canvas学习笔记,持续记录

,因为它们修改是坐标系,之后对之后重新绘制图像产生影响(相当于用修改上下文状态进行绘制)!...3.不要在用drawImage时缩放图像 离屏 canvas 中缓存图片不同尺寸,而不要用drawImage()去缩放它们。...  source-over,现有画布之上绘制图像 destination-over,现有画布下面绘制图形 source-in,与现有画布重叠地方绘制图形,其他地方透明(如单词意思source源内部绘制...) source-out,与现有画布不重叠地方绘制图形,其他地方透明(如单词意思source源外部绘制) source-atop,与现有画布内容重叠地方绘制,其他地方不透明 destination-in...键盘按:keydown 键盘松开:keyup 3.循环事件 说起如何实现 Canvas 动画,大多数人想到都是先使用 setInterval()来定时清空画布、然后重绘图形,从而达到动画效果。

2.4K40

canvas绘制图像轮廓效果绘制边框绘制轮廓 使用算法(marching-squares-algorithm)总结参考文档

考虑到在三维webgl中,计算轮廓算法思路是这样: 先绘制三维模型自身,并在绘制时候启动模板测试,把三维图像保存到模板缓冲中。...下半部分是非透明像素中心3/4出,而几何中心1/2处。...可以绘制放大图片时候,直接使用缩放,而是在上下左右,上左,上右,左,右几个方向进行偏移绘制,多次绘制,代码如下: var dArr = [-1, -1, 0, -1, 1, -1, -1,...所以会导致轮廓像素值会乘以透明度。比如,我们绘制放大图时候,设置globalAlpha = 0.5进行模拟。...dArr[i] * s, p + dArr[i + 1] * s, w, h); } 如下图所示: image.png 当然,透明度很低情况,使用绘制很多遍方式,不是很好解决方案。

2.6K30
  • JavaScript 编程精解 中文第三版 十七、画布上绘图

    它提供了空白html节点上绘制图形编程接口。SVG 与画布最主要区别在于 SVG 保存了对于图像基本信息描述,我们可以随时移动或修改图像。...目前有两种得到广泛支持绘图接口:用于绘制二维图形"2d"与通过openGL接口绘制三维图形"webgl"。 本书只讨论二维图形,而讨论 WebGL。...而位图则相反,不需要设置实际图形,而是通过处理像素数据来绘制图像(光栅化着色点)。 我们可以使用drawImage方法画布上绘制像素值。此处像素数值可以来自元素,或者来自其他画布。...(img, x, 10); } }); 默认情况drawImage会根据原图尺寸绘制图像。...从一张图片或者另一个画布上移动像素到我们画布上可以用drawImage方法实现。默认情况,这个方法绘制了整个原图像,但是通过给它更多参数,你可以拷贝一张图片某一个特定区域。

    3.8K30

    canvas图形绘制之星空、噪点与烟雾效果

    原理就是: 先画一个位置透明度随机静态星星实例对象; 有一个可以改变星星位置和透明draw方法; 定时器跑起来,画布不停地清除绘制,动画效果完成! 原理很简单。...400个点完全不是一个数量级,如果我们真的一个一个绘制下来,肯定,就连Chrome这么牛步浏览器也会感觉到明显的卡顿,如何优化如何绘制呢?...具体实现原理为: 创建一个canvas,绘制一个300*150随机噪点图形; 把这里具有噪点canvas以画布形式绘制到页面上大canvas上; 说得canvas绘图,不得不提一非常常用一个drawImage...(伸展或缩小图像) 本例噪点区块就是通过drawImage()方法被平铺到大canvas元素上。 四、canvas图形效果之烟雾缭绕效果 ?...旋转星空例子,我们是使用canvasfillRect方法绘制了星星,而本例子,则是使用上面提到drawImage()方法把烟雾图片绘制进来了。 其他位移啊,透明度变化什么,原理都是类似。

    1.8K40

    Web H5视频滤镜“百搭”解决方案——WebGL着色器

    问题一、视频滤镜本质是什么? 滤镜本质是一种映射。即通过某种特定算法,将图像像素点从一个值,映射成另一个。 对于视频,则是对每一个图像帧进行映射。...Web上,如何实现这些算法呢? 我们不能够直接操作video标签内容,但我们能够做一个“中转”,把video绘制到canvas里,然后直接使用canvas提供绘制api,修改像素值。...乃至笔者需求中遇到,更为复杂绿幕视频抠图效果(后文会有详细叙述)。 2、区域卷积法 计算一个像素时,同时使用邻近n个像素值。 可以描述为卷积操作,使用一个矩阵作为卷积核,遍历整个图像。...WebGL是一套实现了OpenGL标准Web API,这其中也包括像素并行计算API——着色器(Shader)。 着色器定义了一个三维空间中点,如何渲染成为屏幕上一个像素点。...,我们可以很好地处理半透明边缘、模糊边缘 image.png 1513914072_12_w335_h350.gif 上图是应用在QQ-AR透明Webview项目中案例 更多滤镜算法,可以参考其他图形图像方面的资料

    8K50

    基于 WebGL实现自定义栅格图层踩坑实录

    先看看没有任何处理情况如何绘制纹理,我们绘制瓦片基本顶点模型是一个中心原点正方形,对于每个顶点坐标,需要映射到一个纹理坐标(下图左),传给片元着色器,再使用 texture2D() 取纹理像素...ImageBitmap表示位图图像,用于canvas中绘制图像,相比较于Image 其延迟较低,因为执行texSubImage2D 将Image 绘制到纹理上时也会先将其转为ImageBitmap:...不论是 canvas 里绘制2d图像,还是 WebGL 中创建纹理,当使用图像时浏览器会把图像做一次解码(decode)处理。...小结 UNPACK_FLIP_Y_WEBGL 参数用于设置纹理像素存储模式中是否将Y轴翻转,翻翻取决于你顶点模型坐标系方向,适合自己就好。...我们应用场景里,顶点模型和图像坐标系是反,所以需要将该参数设为1。 使用 texSubImage2D 上传图片时同样受到UNPACK_FLIP_Y_WEBGL 参数影响。

    1.2K71

    Day 3 学习Canvas这一篇文章就够了

    ) 绘制一个矩形边框 clearRect(x, y, widh, height) 清除指定矩形区域,然后这块区域会变完全透明。...所以我们应该保证 img 绘制完成之后再 drawImage。...默认情况,canvas 1 单位就是 1 个像素。举例说,如果我们设置缩放因子是 0.5,1 个单位就变成对应 0.5 个像素,这样绘制出来形状就会是原先一半。...这是默认设置,新图像会覆盖原有图像。 ##2. source-in 仅仅会出现新图像与原来图像重叠部分,其他区域都变成透明。(包括其他图像区域也会透明) ?...##13. copy 只有新图像会被保留,其余全部被清除(边透明) ? #十一、裁剪路径 clip() ​ 把已经创建路径转换成裁剪路径。 ​ 裁剪路径作用是遮罩。

    1K20

    HTML5 Canvas API详解

    绘制路径 beginPath方法表示开始绘制路径,moveTo(x, y)方法设置线段起点,lineTo(x, y)方法设置线段终点,stroke方法用来给透明线段着色。...(image, 0, 0); } image.src = "image.png"; //drawImage()方法接受三个参数,第一个参数是图像文件DOM元素(即img标签),第二个和第三个参数是图像左上角...该数组值,依次是每个像素红、绿、蓝、alpha通道值,因//该数组长度等于 图像像素宽度 x 图像像素高度 x 4,每个值范围是0–255。...这个数组不仅可读,而且可写,//因此通过操作这个数组值,就可以达到操作图像目的。修改这个数组以后,使用putImageData方法将数组内容重新绘//制Canvas上。...y坐标先变小,然后重力作用,不断增大,表示先上升后下降。

    2K20

    Canvas入门到高级详解(上)

    控制其每一个像素。 canvas 标签使用 JavaScript 在网页上绘制图像,本身不具备绘图功能。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像方法。...api(个别最新 api 除外) 移动端兼容情况非常理想,基本上随便使用 2d 支持都非常好,3d(webgl)ie11 才支持,其他都支持 如果浏览器兼容,最好进行友好提示 例如: <canvas...(重点掌握) 上下文:上知天文,知地理。是所有的绘制操作 api 入口或者集合。 Canvas 自身无法绘制任何内容。Canvas 绘图是使用 JavaScript 操作。...2.3.10 清除矩形(clearRect) * 语法:ctx.clearRect(x, y, width, hegiht); * 解释:清除某个矩形内绘制内容,相当于橡皮擦。...2.6.2 画布上绘制图像,并规定图像宽度和高度 context.drawImage(img,x,y,width,height); 参数说明:width 绘制图片宽度, height:绘制图片高度

    1.7K32

    canvas 绘制双线技巧

    优化技巧 后来他找到我来看这个问题,我分析了项目背景情况,给予了一个简单绘制技巧,就是先用较粗线条绘制路径,然后再用较细线条绘制路径,较细线条颜色正好是背景颜色。.../ta... globalCompositeOperation定义和用法 globalCompositeOperation 属性设置或返回如何将一个源(新图像绘制到目标(已有)图像上。...看下destination-out解释: 图像外显示目标图像。只有源图像目标图像部分会被显示,源图像透明绘制了线路Acanvas图像是目标图像,线路B是源图像。...意思源和目标的像素重叠(overlap)部分会被变成透明像素,其他部分正常绘制。 所以上面示例中,线条A和线条B重叠部分会被变成透明绘制效果也是线条A被挖空。...对于source-out,其效果正好和destination-out效果相反: 目标图像之外显示源图像。只会显示目标图像之外源图像部分,目标图像透明

    2.4K50

    第157天:canvas基础知识详解

    ) (重点) 2.6.1 基本绘制图片方式 2.6.2 画布上绘制图像,并规定图像宽度和高度 2.6.3 图片裁剪,并在画布上定位被剪切部分 2.6.4 用JavaScript创建img...,基本上随便使用 2d支持都非常好,3d(webgl)ie11才支持,其他都支持 如果浏览器兼容,最好进行友好提示 2.1.2 浏览器兼容处理(重点) 例如:  <canvas id="cavsElem...(重点掌握) 上下文:上知天文,<em>下</em>知地理。是所有的<em>绘制</em>操作api<em>的</em>入口或者集合。 Canvas自身无法<em>绘制</em>任何内容。Canvas<em>的</em>绘图是使用JavaScript操作<em>的</em>。...2.6.2 <em>在</em>画布上<em>绘制</em><em>图像</em>,并规定<em>图像</em><em>的</em>宽度和高度 context.<em>drawImage</em>(img,x,y,width,height);    参数说明:width <em>绘制</em>图片<em>的</em>宽度,  height:<em>绘制</em>图片<em>的</em>高度...然后运行 transform() transform() 替换绘图的当前转换矩阵 globalCompositeOperation 设置或返回新<em>图像</em><em>如何</em><em>绘制</em>到已有的<em>图像</em>上 <em>像素</em>操作 四、 Canvas开发库封装

    5.1K22

    「Adobe国际认证」关于Adobe Photoshop,创建和修改画笔教程?

    “画笔设置”面板概述 “画笔设置”面板允许您修改现有画笔并设计新自定义画笔。“画笔设置”面板包含一些可用于确定如何图像应用颜料画笔笔尖选项。...文末彩蛋教程 混合模式说明 正常编辑或绘制每个像素使其成为结果色。这是默认模式。(处理位图图像或索引颜色图像时,“正常”模式也称为阈值。) 溶解编辑或绘制每个像素使其成为结果色。...但是,根据任何像素位置透明度,结果色由基色或混合色像素随机替换。 背后仅在图层透明部分编辑或绘画。模式仅在取消选择了“锁定透明区域”图层中使用,类似于透明透明区域背面绘画。...清除编辑或绘制每个像素使其透明模式可用于形状工具(当选定填充区域时)、油漆桶工具 、画笔工具 、铅笔工具 、“填充”命令和“描边”命令。...当您用黑色或白色以外颜色绘画时,绘画工具绘制连续描边产生逐渐变暗颜色。这与使用多个标记笔图像上绘图效果相似。

    1.9K20

    一张刮刮卡竟包含这么多前端知识点

    实现刮刮卡并不难,但其中却涉及很多知识点,掌握这些知识点,有助于我们更深刻理解原理,对于提升举一反三能力很有帮助。本期以实现刮刮卡为例,分享如何科学合理地封装函数,并对涉及相关知识点进行讲解。...这里关键逻辑是:如果设置了图像涂层,则忽略纯色涂层。 涉及到了canvas两个API: drawImage用于绘制图像。...source-atop 目标图像顶部显示源图像。源图像位于目标图像之外部分是不可见。 source-in 目标图像中显示源图像。只有目标图像图像部分会显示,目标图像透明。...source-out 目标图像之外显示源图像。只会显示目标图像之外源图像部分,目标图像透明。 destination-over 图像上方显示目标图像。...只有源图像目标图像部分会被显示,源图像透明。 destination-out 图像外显示目标图像。只有源图像目标图像部分会被显示,源图像透明

    1.3K20

    Java游戏编程不完全详解-2(1万6千字吐血推荐)

    水平和垂直像素组成了屏幕(screen)布局。 屏幕原点是屏幕左上角,像素存贮显卡内存中,它从左上角开始从左到右读,从上到读取。...所有呈现操作仅修改当前剪贴区域内像素剪贴区域是由空间中shape指定,并且通过使 用Gaphics对象程序来控制。用户剪贴区被转换到设备空间中,并与设备剪贴区组合。...其中GraphicsdrawImage方法是用来 绘制指定图像中当前可用图像图像左上角位于该图形上下文坐标空间(x,y)。...图像透明 像素不处已存在像素方法在任何情况都立刻返回,甚至图像尚未完整加载情况,并且 还没有针对当前输出设备完成抖动和转换情况也是如此。...如果图像已经完整加载,并且其像素不 再发生更改,那么drawImage返回true值;否则drawImage返回false值,并且随着更多图像可以用 或者到了绘制动画另一帧时候,加载图像进程将通知指定图像观察者

    1.6K30

    硬核干货来了!鹅厂前端工程师手把手教你实现热力图!

    我们现在要给图形上色,需要使用ImageData对象对图像进行像素操作,读取每个像素透明度,然后使用其映射后颜色改写ImageData数值。...先不急着了解像素操作如何进行,我们首先要确定透明度数值到颜色映射关系。...考虑一,如果我们地图上呈现热力图,随着地图移动,数据点坐标会变化,但其对应圆形图像其实是不变。...所以为了避免更新坐标时重复地创建渐变色、设置globalAlpha、绘制及填充颜色等,我们可以使用离屏渲染预先绘制好每个数据点图像重新渲染时候通过drawImage将其绘制到画布上:...大家对可视化组件每一次调用,都是 “春哥”和她小伙伴们辛勤工作一份肯定。 最后,提前剧透一,基于WebGL开发3D版可视化组件也即将上线,展示效果更加酷炫,还请各位开发者小伙伴持续关注!

    1.5K40

    Unity可编程渲染管线系列(十一)后处理(全屏特效)

    由于效果以像素比例起作用,因此通过增加游戏窗口比例因子最容易看到。 ? ? (×10比例修改图像) 最简单模糊操作是2×2框式滤镜,它平均四个像素块。...但是,默认滤镜模式是点,它会钳位到最近像素,因此当前仅移动图像。我们必须更改MyPipeline.Render,以便它对颜色纹理使用双线性过滤。仅当不在像素中心采样时,更改才重要。 ?...但是,默认滤镜模式是点,它会钳位到最近像素,因此当前仅移动图像。我们必须更改MyPipeline.Render,以便它对颜色纹理使用双线性过滤。仅当不在像素中心采样时,更改才重要。 ? ?...5.4 仅不透明后处理 除天空盒外,透明几何也不会写入深度缓冲区。因此,条纹将基于其背后内容而应用于透明表面的上层。景深等效行为方式相同。对于某些效果,最好不要将它们完全应用于透明对象。...这可以通过透明几何图形之前对其进行渲染,使其成为不透明透明效果来实现。

    3.6K20

    canvas相关API简介及思考

    为什么这样说,因为大部分前端开发人员写业务代码时候用到canvas概率很小,就算用到了,也只是类似drawImage这个API,并且,对drawImage这个API了解也并不深刻,只知道它可以将图片绘制到画布上...其实drawImage这个API除了能将图片绘制到画布上,也可以对绘制到画布上图片进行缩放。...clearRect(x, y, width, height)清除指定矩形区域,让清除部分完全透明。...scale(x,y) 缩放:增减图像在canvas中像素数目 slice(x,y) 切片 canvas状态保存和恢复 save() 保存画布所有状态 restore() 恢复画布状态 translate...(x,y) 移动画布 rotating(angle) 旋转 scale(x,y) 缩放:增减图像在canvas中像素数目 transform(a,b,c,d,e,f) 对变形矩阵直接修改 组合 组合是将两个图像或选区组合在一起

    76230

    【Canvas】入门 - 实现图形以及图片绘制

    原因是:使用css样式,不会增加像素点,只会将原有像素点扩大。 通俗来讲,就是使用属性画布上图形该是多大还是多大,而使用样式就会把画布上图形扩大。...也就是说,如果beginPath(),那么画另一个图也会重新画一遍上一个图。...) 方法直接进行fill填充绘制,不会产生路径 清除矩形 clearRect(x,y,width,height) let canvas = document.querySelector(...300)地方填充一个宽200高100矩形 ctx.clearRect(300,300,50,50) // (300,300) 地方擦除宽高都为50矩形 绘制图片 基本使用 ctx.drawImage...(img,x,y) 绘制图片 x,y表示绘制画布什么位置 ctx.drawImage(img,x,y,sWidth,sHeight) sWidth,sHeight表示绘制图片大小 ctx.drawImage

    1.2K20

    WebGL 纹理颜色原理

    [1510109227732_1586_1510109273487.jpg] 颜色缓冲区 绘制开始前,经常见到调用函数清空画布代码gl.clear(gl.COLOR_BUFFER_BIT),清空画布绘图区实际上就是用之前定义好背景颜色将颜色缓冲颜色清除...可以将颜色缓存区看成图像颜色存储器,缓存区中以RGB或RGBA格式存储着画布上每一个像素颜色信息,各个像素点组合起来就构成了颜色缓存矩形阵列。...位,表示每一个像素24位,一般24位分配方案就是红色、蓝色、绿色各占8位,如果需要透明效果的话,可以采用32位颜色深度为alpha通道分配8位。...这里可以总结得出,画布上各个像素点呈现颜色就是存放在颜色缓冲区颜色信息所决定,而绘制图形颜色缓冲区信息又是由顶点着色器决定。要知道颜色如何渲染就要深入分析着色器工作过程。...): 定义绘制图形垂直方向如何填充,默认值gl.REPEAT 详细参考texParameteri 纹理单元 如果需要使用多张图片就要管理多个纹理图片,WebGL为了使用多个纹理,用纹理单元来处理纹理图像

    2.6K10
    领券