图像绘制方法
drawImage()        向画布上绘制图像、画布或视频

像素操作属性和方法
width                                返回 ImageData 对象的宽度
height                        返回         ImageData 对象的高度
data                                返回一个对象,其包含指定的 ImageData 对象的图像数据

createImageData()        创建新的、空白的 ImageData 对象
getImageData()                返回 ImageData 对象,该对象为画布上指定的矩形复制像素数据
putImageData()                把图像数据(从指定的 ImageData 对象)放回画布上

    <canvas id="g" width="880" height="450" style="border:1px solid #000"></canvas>
<img src="data:images/eg_tulip.jpg" id="img">
<script type="text/javascript">
var a=document.getElementById("g");
var ctx=a.getContext("2d"); var img=document.getElementById("img");
ctx.drawImage(img,0,0); //向画布上绘制图像、画布或视频
var imgData=ctx.getImageData(0,0,c.width,c.height); //返回 ImageData 对象,该对象为画布上指定的矩形复制像素数据
// 反转颜色
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i]=255-imgData.data[i];//返回一个对象,其包含指定的 ImageData 对象的图像数据
imgData.data[i+1]=255-imgData.data[i+1];
imgData.data[i+2]=255-imgData.data[i+2];
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,0,0);//把图像数据(从指定的 ImageData 对象)放回画布上 var imgData=ctx.createImageData(100,100);//创建新的、空白的 ImageData 对象
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i+0]=0;
imgData.data[i+1]=255;
imgData.data[i+2]=0;
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,10,150); var imgDa=ctx.getImageData(10,150,100,100);
ctx.putImageData(imgDa,10,300);
</script>

HTML5 canvas图像绘制方法与像素操作属性和方法的更多相关文章

  1. html5 canvas 画图移动端出现锯齿毛边的解决方法

    使用HTML5的canvas元素画出来的.在移动端手机上测试都发现画图有一点锯齿问题 出现这个问题的原因应该是手机的宽是720像素的, 而这个canvas是按照小于720像素画出来的, 所以在720像 ...

  2. Opencv中图像的遍历与像素操作

    Opencv中图像的遍历与像素操作 OpenCV中表示图像的数据结构是cv::Mat,Mat对象本质上是一个由数值组成的矩阵.矩阵的每一个元素代表一个像素,对于灰度图像,像素是由8位无符号数来表示(0 ...

  3. JavaScript 基于HTML5 canvas 获取文本占用的像素宽度

    基于HTML5 canvas 获取文本占用的像素宽度   by:授客 QQ:1033553122 直接上代码   // 获取单行文本的像素宽度 getTextPixelWith(text, fontS ...

  4. js进阶正则表达式11RegExp的属性和方法(RegExp的属性和方法,就是RegExp对象.(点)什么的形式)(正则表达式执行之前会被编译)

    js进阶正则表达式11RegExp的属性和方法(RegExp的属性和方法,就是RegExp对象.(点)什么的形式)(正则表达式执行之前会被编译) 一.总结 1. RegExp的属性和方法,就是RegE ...

  5. static 关键字详解 static方法调用非static属性和方法

    静态的属性和方法在内存中的存放地址与非静态的是不同的,静态的是存放在static区,它意味着静态方法是没有this的,所以我们不可以从一个static方法内部发出对非static方法的调用.但是反之是 ...

  6. 【canvas学习笔记八】像素操作

    ImageData对象 ImageData对象包含了一个区域内的canvas的像素信息.它包含以下可读属性: width canvas的宽度,单位是像素. height canvas的高度,单位是像素 ...

  7. HTML5 canvas标签绘制正三角形 鼠标按下点为中间点,鼠标抬起点为其中一个顶点

    用html5的canvas标签绘制圆.矩形比较容易,绘制三角形,坐标确定相当于前面两种难点,这里绘制的是正三角形,比较容易,我们只需要把鼠标刚按下去的点设置为三角形的中心点,鼠标抬起的点设置为三角形右 ...

  8. HTML5 Canvas图像放大、移动实例1

    1.前台代码 <canvas id="canvasOne" class="myCanvas" width="500" height=& ...

  9. [js高手之路] html5 canvas教程 - 绘制七巧板

    七巧板长什么样? 用canvas把他画出来,其实就是把这7个区域的图形,每个点的坐标找出来,再用moveTo, lineTo连线,设置不同的颜色即可. <head> <meta ch ...

随机推荐

  1. Keil C51中变量和函数的绝对地址定位问题

    1.变量绝对地址定位 1) 在定义变量时使用 _at_ 关键字加上地址就可. unsigned char idata myvar _at_ 0x40;  把变量 myvar 定义在 idata 的 0 ...

  2. pl/sql 程序块里打印问题

    declare v_number NUMBER; v_number2 NUMBER; begin select count(*) into v_number from dual; DBMS_OUTPU ...

  3. BZOJ 1020 [SHOI2008]安全的航线flight

    1020: [SHOI2008]安全的航线flight Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 847  Solved: 286[Submit][ ...

  4. Win7无法访问NAS或Samba服务器解决之道 转

    Win7无法访问NAS或Samba服务器解决之道 http://www.sina.com.cn  2010年05月12日 01:41  IT168.com [IT168 应用]默认情况下,Window ...

  5. HDU5409---CRB and Graph 2015多校 双联通分量缩点

    题意:一个联通的无向图, 对于每一条边, 若删除该边后存在两点不可达,则输出这两个点, 如果存在多个则输出第一个点尽可能大,第二个点尽可能小的. 不存在输出0 0 首先 若删除某一条边后存在多个联通分 ...

  6. 机器学习十大算法 之 kNN(一)

    机器学习十大算法 之 kNN(一) 最近在学习机器学习领域的十大经典算法,先从kNN开始吧. 简介 kNN是一种有监督学习方法,它的思想很简单,对于一个未分类的样本来说,通过距离它最近的k个" ...

  7. ruby+rt标签的效果

    代码如下: <ruby>我是孤行者<rt>wo shi gu xing zhe</tr></ruby> 效果如下

  8. SKKeyframeSequence类

    继承自 NSObject 符合 NSCodingNSCopyingNSObject 框架  /System/Library/Frameworks/SpriteKit.framework 可用性 可用于 ...

  9. WPS2012交叉引用技巧,word比wps这点强更新參考文献

                WPS2012交叉引用技巧,word比wps这点强更新參考文献 到时生成仅仅有有一条线,好像WPS不能够,word能够,假设谁知道能够补充.^_^ 1.写论文,參考文献的改动非 ...

  10. 关于linux内存管理

     Linux的内存管理主要分为两部分:物理地址到虚拟地址的映射,内核内存分配管理(主要基于slab). 物理地址到虚拟地址之间的映射 1.概念 物理地址(physical address) 用于内存芯 ...