定义和用法
getImageData() 方法返回 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() 方法将图像数据拷贝回画布上。
例子:
以下代码可获得被返回的 ImageData 对象中第一个像素的 color/alpha 信息:
red=imgData.data[0]; green=imgData.data[1]; blue=imgData.data[2]; alpha=imgData.data[3];
提示:您也可以使用 getImageData() 方法来反转画布上某个图像的每个像素的颜色。
使用该公式遍历所有的像素,并改变其颜色值:
red=255-old_red; green=255-old_green; blue=255-old_blue;
(请见下面的“亲自试一试”实例。)
JavaScript 语法
var imgData=context.getImageData(x,y,width,height);//在指定的区域取回像素
参数值
x | 开始复制的左上角位置的 x 坐标。 |
y | 开始复制的左上角位置的 y 坐标。 |
width | 将要复制的矩形区域的宽度。 |
height | 将要复制的矩形区域的高度。 |
定义和用法
putImageData() 方法将图像数据(从指定的 ImageData 对象)放回画布上。
提示:请参阅 getImageData() 方法,它可复制画布上指定的矩形的像素数据。
提示:请参阅 createImageData() 方法,它可创建新的空白 ImageData 对象。
JavaScript 语法:
context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);与getImageData是对应的
参数值
imgData | 规定要放回画布的 ImageData 对象。 |
x | ImageData 对象左上角的 x 坐标,以像素计。 |
y | ImageData 对象左上角的 y 坐标,以像素计。 |
dirtyX | 可选。水平值(x),以像素计,在画布上放置图像的位置。 |
dirtyY | 可选。水平值(y),以像素计,在画布上放置图像的位置。 |
dirtyWidth | 可选。在画布上绘制图像所使用的宽度。 |
dirtyHeight | 可选。在画布上绘制图像所使用的高度。 |
定义和用法
globalAlpha 属性设置或返回绘图的当前透明值(alpha 或 transparency)。
globalAlpha 属性值必须是介于 0.0(完全透明) 与 1.0(不透明) 之间的数字。
1.0 |
context.globalAlpha=number;//设置透明度 |
属性值
number | 透明值。必须介于 0.0(完全透明) 与 1.0(不透明) 之间。 |
实例
首先,绘制一个红色的矩形,然后将透明度 (globalAlpha) 设置为 0.2,然后再绘制一个绿色和一个蓝色的矩形:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
// 调节透明度
ctx.globalAlpha=0.2;
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="green";
ctx.fillRect(80,80,75,50);
定义和用法
globalCompositeOperation 属性设置或返回如何将一个源(新的)图像绘制到目标(已有)的图像上。
源图像 = 您打算放置到画布上的绘图。
目标图像 = 您已经放置在画布上的绘图。
source-over |
context.globalCompositeOperation="source-in"; |
属性值
source-over | 默认。在目标图像上显示源图像。 |
source-atop | 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。 |
source-in | 在目标图像中显示源图像。只有目标图像内的源图像部分会显示,目标图像是透明的。 |
source-out | 在目标图像之外显示源图像。只会显示目标图像之外源图像部分,目标图像是透明的。 |
destination-over | 在源图像上方显示目标图像。 |
destination-atop | 在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。 |
destination-in | 在源图像中显示目标图像。只有源图像内的目标图像部分会被显示,源图像是透明的。 |
destination-out | 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示,源图像是透明的。 |
lighter | 显示源图像 + 目标图像。 |
copy | 显示源图像。忽略目标图像。 |
source-over | 使用异或操作对源图像与目标图像进行组合。 |
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d"); ctx.fillStyle="red"; ctx.fillRect(20,20,75,50);ctx.globalCompositeOperation="source-over";
ctx.fillStyle="blue"; ctx.fillRect(50,50,75,50); ctx.fillStyle="red"; ctx.fillRect(150,20,75,50);ctx.globalCompositeOperation="destination-over";
ctx.fillStyle="blue"; ctx.fillRect(180,50,75,50);
相关推荐
主要介绍了 Android canvas drawBitmap方法详解及实例的相关资料,需要的朋友可以参考下
主要介绍了详解Html5 Canvas画线有毛边解决方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
主要介绍了小程序中canvas的drawImage方法参数使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
本篇文章主要介绍了js实现canvas保存图片为png格式并下载到本地的方法,非常具有实用价值,需要的朋友可以参考下
js+canvas 绘制五角星的方法主要介绍了使用 JavaScript 调用 canvas 组件结合数学运算绘制图形的相关技巧。下面将详细介绍该方法的实现步骤和相关概念。 JavaScript 和 Canvas 组件 JavaScript 是一种广泛使用的...
3.组件间通信 4.canvas(生成图片、预览/保存、文字换行) 1.颜色选择器 从小程序的文档中没有找到相应的颜色选择组件,昨天(18.3.13)小程序插件功能上线了,小伙伴们也可以选择插件。写这个demo是在前两天写的,...
本篇文章主要介绍了Android Canvas方法总结最全面详解API,分享给大家,具体如下: 常用方法 drawXxx方法族:以一定的坐标值在当前画图区域画图,另外图层会叠加, 即后面绘画的图层会覆盖前面绘画的图层。 ...
网页开发经典教程,主要介绍了Html5和canvas的设计方法
主要介绍了HTML5 Canvas之测试浏览器是否支持Canvas的方法,本文给出了两种原生方法和一个modernizr类库,需要的朋友可以参考下
此资源是我编写的一个小游戏,基于HTML5中...在代码中主要实现了小方块的生成,键盘键事件的监听,小球的移动和碰壁之后的反弹以及怎样消除小方块等方法。代码使用到了一个js脚本库,为此可能还会出现版本二,望关注。
本文主要介绍了使用 js+html5 实现 canvas 绘制椭圆形图案的方法,涉及 html5 图形绘制的基础技巧。下面是实现椭圆形图案的详细步骤: 1. 首先,需要创建两个 canvas 元素,一个隐式的画布(hide)和一个显式的画布...
HTML5 Canvas动画效果演示 主要思想: 首先要准备一张有连续帧的图片,然后利用HTML5 Canvas的draw方法在不同的时间间隔绘制不同的帧,这样看起来就像动画在播放。 关键技术点: JavaScript 函数setTimeout()有两个...
<canvas></canvas>是HTML5中新增的标签,用于绘制图形,实际上...在<canvas>>元素上绘图主要有三步: 获取<canvas>元素对应的DOM对象,这是一个Canvas对象; 调用Canvas对象的getContext()方法,得到一个CanvasRende
Js之canvas获取图片主色调,近似色,互补色,以及根据图片颜色获取主题配色方案详解、插件。
整个流程中所用到的主要Canvas API有: 绘制图像: drawImage() 获取图像数据: getImageData() 重写图像数据: putImageData() 导出图像: toDataURL() 1. drawImage() 顾名思义,该方法就是用于将图像绘
主要介绍了JS使用canvas中的measureText方法测量字体宽度,结合实例形式分析了canvas的measureText方法相关使用技巧,需要的朋友可以参考下
他的主要功能就是绘制图片、视频,甚至其他画布等。 问题: 慕名赶来,却一脚踩空,低头一看,地上一个大坑。 事情是这样的,在我看完w3c的介绍和很有说服力和教学力的demo后,本着实践出真知的思想决定上手一试,这一试不...
Java中的Canvas绘图源码实例,主要是画线条、弧线、圆角矩形、三角形、文字、圆形等简单的几何图形,主要是通过创建DrawingCanvas对象canvas,为canvas设置命令监听者,实现接口CommandListener的方法,把缓冲区图像...
在Android UI开发专题的前五节我们讲到的东西主要是基础和理论内容,从本次Android123将通过实例代码来演示,本次主要是Bitmap和Canvas类的使用,根据要求缩放Bitmap对象并返回新的Bitmap对象。centerToFit方法一共...
<canvas></canvas>是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingContext...2.调用Canvas对象的getContext()方法,得到一个CanvasRendering