`
cakin24
  • 浏览: 1386040 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

Canvas 像素处理之改变透明度

阅读更多
一 定义和用法
getImageData()方法返回 ImageData 对象,该对象拷贝了画布指定矩形的像素数据。
注意:ImageData对象不是图像,它规定了画布上一个部分(矩形),并保存了该矩形内每个像素的信息。
对于ImageData对象中的每个像素,都存在着四方面的信息,即RGBA值:
R - 红色(0-255)
G - 绿色(0-255)
B - 蓝色(0-255)
A - alpha 通道(0-255; 0 是透明的,255 是完全可见的)
color/alpha 信息以数组形式存在,并存储于 ImageData 对象的 data 属性中。
提示:在操作完成数组中的 color/alpha 信息之后,您可以使用 putImageData() 方法将图像数据拷贝回画布上。
 
二 代码
<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> 改变透明度 </title>
</head>
<body>
<h2> 改变透明度 </h2>
<canvas id="mc" width="600" height="460"
	style="border:1px solid black"></canvas>
<script type="text/javascript">
	// 获取canvas元素对应的DOM对象
	var canvas = document.getElementById('mc');
	// 获取在canvas上绘图的CanvasRenderingContext2D对象
	var ctx = canvas.getContext('2d');
	var image = new Image();
	image.src = "test.png";
	image.onload = function()
	{
		// 用带透明度参数的方法绘制图片
		drawImage(image , 124  , 20 , 0.4);
	}
	var drawImage = function(image , x  , y , alpha)
	{
		// 绘制图片
		ctx.drawImage(image , x , y);
		// 获取从x、y开始,宽为image.width、高为image.height的图片数据
		// 也就是获取绘制的图片数据
		var imgData = ctx.getImageData(x , y , image.width , image.height);
		for (var i = 0 , len = imgData.data.length ; i < len ; i += 4 )
		{
			// 改变每个像素的透明度
			imgData.data[i + 3] = imgData.data[i + 3] * alpha;
		}
		// 将获取的图片数据放回去。
		ctx.putImageData(imgData , x , y);
	}
</script>
</body>
</html>
 
三 运行结果

 
  • 大小: 14.5 KB
1
0
分享到:
评论

相关推荐

    Canvas 像素处理之改变透明度的实现代码

    通过这种方式,我们可以对Canvas上的任何图像进行复杂的像素级操作,不仅限于改变透明度,还可以调整颜色、添加滤镜等。这种能力使得Canvas成为Web开发中进行动态图形和动画制作的强大工具。然而,需要注意的是,...

    用canvas写的一个对比度

    这个方法返回一个`ImageData`对象,包含了图像每一个像素的红、绿、蓝和 alpha(透明度)通道值。 ```javascript var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var img ...

    HTML5 Canvas像素波浪动画特效.zip

    6. **颜色和透明度处理**:Canvas API还允许开发者控制颜色和透明度,通过`fillStyle`和`globalAlpha`属性可以改变像素块的颜色和透明度,增强视觉效果。 7. **事件监听**:为了响应用户的交互,比如鼠标移动,...

    html5<canvas操作像素之添加杂色,动态倒影>.zip

    每个像素都有红、绿、蓝和 alpha(透明度)四个通道,可以通过索引来访问并修改它们的值。 2. **添加杂色**: - 杂色效果通常是指随机地改变像素的颜色值,以创建一种噪点或模糊的效果。在Canvas中,可以通过循环...

    本示例 演示可任意改变透明度的位图

    通常,这种功能可以通过使用特定的库或API来实现,比如在Android系统中,我们可以使用Android SDK提供的Bitmap类来处理位图的透明度。 首先,理解alpha通道的概念至关重要。Alpha通道是一个额外的灰度图像层,灰度...

    html5 canvas透明圆点模糊背景动画特效

    通过在每一帧更新圆点的位置、大小、透明度或者颜色,可以实现动态的视觉变化,使圆点看起来像是在移动或改变状态。这种动画可以创建出流动和变化的背景,增加用户的沉浸感。 此外,HTML5的`&lt;canvas&gt;`元素与CSS结合...

    HTML5 Canvas像素处理使用接口介绍

    这个对象包含了一个 `data` 属性,它是一个一维数组,每个元素对应图像中一个像素的 RGBA 值(红、绿、蓝、透明度): ```javascript var imageData = context.getImageData(x, y, width, height); ``` `ImageData...

    android之Canvas撕衣服

    在模拟"撕衣服"的过程中,我们可能需要用到不同的Paint设置,比如使用透明度来让“撕开”的边缘看起来更自然,或者设定特定的颜色来描绘撕裂痕迹。 4. **图像处理算法**: 实现撕衣服效果可能需要用到图像处理算法...

    基于HTML5+Canvas绘制的酷炫全屏透明白色花环动画特效源码.zip

    此外,源码中的“透明”可能是指设置了Canvas的透明度或者特定元素的透明度。在Canvas中,可以使用globalAlpha属性来控制绘制的透明度,而在CSS中,可以使用opacity属性来调整元素的整体透明度。 总的来说,这个...

    安卓手绘图片处理画板相关-Android图像处理(颜色矩阵像素色相透明度亮度).zip

    颜色矩阵、像素操作、色相调整、透明度控制以及亮度调节是Android图像处理中的核心概念,这些技术使得开发者能够实现丰富的视觉效果和图像编辑功能。 颜色矩阵(ColorMatrix)是Android图像处理中的一个重要工具,...

    HTML5 Canvas图片倒影波纹特效.zip

    对于波纹效果,可能需要使用`putImageData()`方法,将每个像素的透明度或颜色值进行修改,模拟水面波动的视觉感受。 4. **事件监听**:为了增加交互性,可以监听用户的鼠标或触摸事件,让波纹效果随着用户的输入...

    Canvas_drawPoint

    例如,你可以使用`setAlpha()`来设置透明度,`setColor()`来设置颜色,或者`setStrokeWidth()`来改变点的大小(虽然通常情况下点的大小是固定的一像素)。 在实际应用中,`drawPoint()`常用于绘制简单的点状图,如...

    Canvas绘制心电图

    此外,还可以调整线条的宽度、透明度等,以增强视觉效果。 6. **动画和实时更新**:如果心电图需要动态显示,可以使用`requestAnimationFrame()`来创建平滑的动画效果。每次帧更新时,根据新的数据重新绘制心电图。...

    Canvas特效之Filter.zip

    2. **PorterDuffColorFilter**: 基于Porter-Duff操作符进行混合,可以实现不同图层之间的透明度和颜色混合效果,如叠加、清除、源覆盖等。 3. **LightingColorFilter**: 可以对颜色进行光照效果处理,包括调整亮度...

    jqueryhtml5 canvas翻滚熔岩动画背景特效

    4. **色彩和光照效果**:通过调整像素的颜色和透明度,可以模拟熔岩的温度变化和光照效果,增加视觉深度。 5. **性能优化**:由于动画需要频繁重绘,我们需要确保代码尽可能高效。可以使用缓存策略减少不必要的计算...

    Canvas 发光loading动画

    为了产生发光效果,我们可以多次绘制同一形状,每次稍微改变颜色和透明度: ```javascript function drawGlowingCircle(x, y, radius, numSteps) { for (let i = 0; i ; i++) { let alpha = 1 - i / numSteps; ...

    delphi Canvas 图形绘制

    Canvas还支持透明度、线样式、线宽的调整,以及渐变填充等高级特性,可以根据需要灵活运用。 通过熟练掌握上述知识点,你将能够使用Delphi的Canvas组件创建出丰富多彩的图形界面,无论是简单的UI元素还是复杂的...

    html5 canvas图片水波倒影动画特效

    扭曲函数可能包括对像素位置的偏移,或者对像素亮度和透明度的调整。 倒影部分则需要将图像镜像翻转并在下方绘制。首先,我们可以创建一个新的Canvas元素,大小与原Canvas相同但位置在其下方。然后,对原始图片进行...

    HTML5 canvas实现的透明丝带飘舞动画效果源码.zip

    4. **透明度处理**:在canvas上绘制时,可以设置绘图操作的透明度(alpha值),通过`context.globalAlpha`属性控制。透明丝带的效果可能就是通过调整不同时间点的alpha值来实现的。 5. **路径操作**:canvas提供了...

    html5 canvas绘制随机流动粒子动画背景特效

    粒子的颜色是随机的,透明度可以根据需求调整。流动的速度和方向由粒子的初始速度决定,通过改变速度的随机范围和乘以负一来实现反弹效果。 最后,为了使粒子流动更具动态性,我们可以添加风力或重力的影响,或者让...

Global site tag (gtag.js) - Google Analytics