`
cakin24
  • 浏览: 1389828 次
  • 性别: 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="900" height="400"
	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()
	{
		// 绘制原始图片
		ctx.drawImage(image , 30 , 20);
		// 用带高亮参数的方法绘制图片
		lightImage(image , 450  , 20 , 2.6);
	}
	var lightImage = function(image , x  , y , light)
	{
		// 绘制图片
		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 )
		{
			// 改变每个像素的R、G、B值
			imgData.data[i + 0] = imgData.data[i + 0] * light;
			imgData.data[i + 1] = imgData.data[i + 1] * light;
			imgData.data[i + 2] = imgData.data[i + 2] * light;
		}
		// 将获取的图片数据放回去。
		ctx.putImageData(imgData , x , y);
	}
</script>
</body>
</html>
 
 
三 运行结果

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

相关推荐

    HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体

    在“HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体”这篇博文中,作者深入探讨了如何利用Canvas技术来实现菜单项的高亮显示以及如何处理像素字体,这两点在构建具有视觉吸引力和用户友好性的Web应用时非常重要。...

    鼠标在canvas上悬浮,并提示鼠标位置信息

    由于浏览器的事件对象提供了`clientX`和`clientY`属性,表示鼠标在视口中的位置,但这些坐标并不直接对应于Canvas的像素坐标,我们需要将它们转换为Canvas的坐标系统: ```javascript var rect = canvas....

    canvas小游戏-连连看

    6. **draw.js**:绘制模块,负责在Canvas上渲染游戏画面,包括图案、背景、选中的图案高亮等视觉元素。Canvas API提供了丰富的绘图函数,如`fillRect()`、`drawImage()`等,使得开发者可以精确控制每个像素的显示。 ...

    Canvas绘制心电图

    1. **坐标系统**:Canvas是一个像素网格,它的左上角为(0, 0)坐标,向右和向下分别是x轴和y轴的增长方向。我们要根据这个坐标系统来定位和绘制心电图的波形。 2. **线条绘制**:`beginPath()`方法开始一条新路径,`...

    html5 canvas 制作流程图 EaselJS

    - **事件监听**:EaselJS提供了事件处理机制,如click、mouseover等,可以为流程图的节点添加交互效果,如高亮、拖放等。 - **动画**:EaselJS的TweenJS子库支持复杂的动画效果,如淡入淡出、平移、旋转等,可用于...

    省份点击高亮显示.rar

    总结来说,实现"省份点击高亮显示"需要掌握JavaScript事件处理、SVG或Canvas图形绘制、地图数据处理和交互设计等相关技术。同时,为了提供良好的用户体验,还需要考虑性能优化和响应式布局。通过不断学习和实践,你...

    Canvas可拖动动画人物关系图代码

    Canvas是一个二维绘图API,允许开发人员通过JavaScript控制像素级别的渲染。通过调用不同的绘图方法,如`fillRect()`、`strokeText()`等,可以在Canvas上绘制形状、文本、图像等各种元素。由于Canvas是动态的,因此...

    Canvas仿微信照片裁剪功能

    使用`getImageData()`方法获取裁剪框内的像素数据,然后创建一个新的Canvas,将其大小设置为目标裁剪尺寸,再用`putImageData()`方法将裁剪后的像素数据绘制到新Canvas上,最后可以通过`toDataURL()`生成裁剪图片的...

    原生html配合canvas仿echarts图标组件合集源码.zip

    8. **性能优化**:由于Canvas是逐像素操作,大量数据的实时渲染可能导致性能问题。项目可能通过优化算法、减少重绘区域、使用Web Workers等手段提高性能。 9. **模块化和封装**:为了代码的可维护性和复用性,项目...

    Canvas绘制饼状分布图特效.zip

    - Canvas是HTML5中的一个二维绘图API,通过JavaScript操作像素级画布,可以实现动态和交互式的图形。 - Canvas通过`&lt;canvas&gt;`标签在HTML中创建,然后通过JavaScript的`canvas.getContext('2d')`获取2D渲染上下文,...

    js 纯canvas绘制关系图(横纵双向)节点层级个数不受限

    在JavaScript开发中,Canvas是一个强大的绘图工具,它允许开发者直接在网页上进行像素级别的图形绘制。本项目涉及的是利用纯Canvas技术实现一个关系图的绘制,特别强调了该图可以支持横纵双向布局,并且节点的层级个...

    JavaScript html5 canvas实现图片上画超链接

    我们还定义了几个按钮事件处理函数,比如`DrawDot`用于绘制红色圆点(代表高亮区域),`startDrawing`用于开始绘制,`mousedownhandle`、`mouseuphandle`和`mousemoving`分别处理鼠标按下、释放和移动事件。...

    HTML5 Cavnas实现连线题特效

    HTML5 Canvas是一个强大的图形绘制工具,它允许网页开发者在页面上直接进行像素级的图形操作。Canvas通过JavaScript API提供了一套完整的绘图命令,可以用于创建动态、交互式的图形,包括绘制线条、形状、图像以及...

    一个完整的demo,功能点: 动态编辑图片, 美颜, 磨皮,高亮,添加水印,截取

    在Android平台上,开发一款应用程序,实现动态编辑图片、美颜、磨皮、高亮以及添加水印等功能,是一项常见的需求。这些功能对于社交媒体应用、图片编辑应用或是个人创作工具来说至关重要。下面,我们将深入探讨这些...

    五子棋人机对战,div+css,canvas绘制i.rar

    Canvas是HTML5引入的一个强大的绘图API,允许开发者在网页上进行像素级别的图形操作。在五子棋游戏中,Canvas成为了实现棋局动态渲染的核心。开发者可以利用JavaScript控制Canvas的`fillRect()`、`strokeRect()`等...

    js HTML5 Canvas线性图表插件可以绘制不同的颜色.zip

    3. **坐标系统**:Canvas的坐标系统是以像素为单位,(0,0)位于左上角,X轴向右延伸,Y轴向下延伸。 4. **颜色和样式**:使用`strokeStyle`和`fillStyle`属性设置线条和填充的颜色。可以使用RGB、RGBA、十六进制或...

    HTML5 Canvas图片倒影波纹动画特效特效代码

    可以创建一个二维数组表示波纹,每个元素代表一个像素的高亮程度。随着时间的推移,这些值会按某种规律(例如正弦函数)变化,从而产生波动效果。使用`requestAnimationFrame()`实现平滑的动画循环。 4. **重绘...

    JavaScript+html5 canvas绘制渐变区域完整实例

    在实际的项目中,渐变效果可以应用在许多不同的场景中,比如创建背景图案、动态按钮效果、高亮显示内容等。通过调整渐变的颜色、方向、甚至创建多色点的渐变效果,我们可以制作出非常丰富和具有视觉吸引力的图形。 ...

    JS上传图片点击获取图片色块特效代码.zip

    当用户点击图片时,我们需要计算点击位置对应的Canvas像素坐标,然后通过Canvas的getImageData方法获取该位置的RGB值。 5. **颜色提取与显示**:获取到的RGB值可以转换为十六进制颜色代码或者HSB/HSV等其他颜色模型...

    echarts基于canvas全国地图特效代码

    Canvas 的优点在于可以实现像素级别的操作,提供更丰富的视觉效果。 3. **JSON 获取城市数据**: ECharts 地图需要地理坐标数据来呈现地图形状。这些数据通常以 JSON 格式存储,包含各个省、市、区的边界坐标信息...

Global site tag (gtag.js) - Google Analytics