H5:画布Canvas基础知识讲解(二)之插入图像、像素级操作、文字

简介: ​上一节介绍了H5:画布Canvas基础知识讲解(一)之canvas基础、2D context API、路径,接下来继续讲解H5:画布Canvas基础。

插入图像

drawImage方法允许在Canvas中插入其他图像(img和Canvas元素) 。在Opera中可以在Canvas中绘制SVG图形。此方法比较复杂,可以有3个、5个或9个参数:

3个参数:最基本的drawImage使用方法。一个参数指定图像位置,另两个参数设置图像在Canvas中的位置。

5个参数:中级的drawImage使用方法,包括上面所述3个参数,加两个参数指明插入图像宽度和高度 (如果你想改变图像大小)。

9个参数:最复杂drawImage杂使用方法,包含上述5个参数外,另外4个参数设置源图像中的位置和高度宽度。这些参数允许你在显示图像前动态裁剪源图像。

下面是上述三个使用方法的例子:

context.drawImage(img_elem, dx, dy);
  context.drawImage(img_elem, dx, dy, dw, dh);
  context.drawImage(img_elem, sx, sy, sw, sh, dx, dy, dw, dh);
复制代码

可以把上面代码放置在文档head部分中,或者放在外部JavaScript文件中。

像素级操作

2D Context API提供了三个方法用于像素级操作:createImageData,getImageData和putImageData。

ImageData对象保存了图像像素值。每个对象有三个属性: width,height和data。data属性类型为CanvasPixelArray,用于储存width*height*4个像素值。每一个像素 有RGB值和透明度alpha值(其值为0至255,包括alpha在内。)。像素的顺序从左至右,从上到下,按行存储。

来看一个例子:

var imgd = context.createImageData(50,50);
  var pix = imgd.data;
  for (var i = 0; n = pix.length, i < n; i += 4) {
    pix[i  ] = 255;
    pix[i+3] = 127;
  }
  context.putImageData(imgd, 0,0);
复制代码

注意:

不是所有浏览器都实现了createImageData。在支持的浏览器中,需要通过getImageData方法获取ImageData对象。

通过ImageData可以完成很多功能。如可以实现图像滤镜,或可以实现数学可视化 (如分形和其他特效)。来看一个实例:

var imgd = context.getImageData(x, y width, height);
  var pix = imgd.data;
  for (var i = 0, n = pix.length; i < n; i += 4) {
    pix[i  ] = 255 - pix[i  ];
    pix[i+1] = 255 - pix[i+1];
    pix[i+2] = 255 - pix[i+2];
  }
  context.putImageData(imgd,x, y);
复制代码

可以把上面代码放置在文档head部分中,或者放在外部JavaScript文件中。

下一节继续讲H5:画布Canvas基础知识讲解(三)之文字、阴影、颜色渐变。


作者:zhulin1028

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

相关文章
|
4月前
|
前端开发 图形学
小功能⭐️3DCanvas交互方法、Unity自动调整文本框大小、改变文字大小和颜色
小功能⭐️3DCanvas交互方法、Unity自动调整文本框大小、改变文字大小和颜色
|
5月前
|
机器学习/深度学习 前端开发 算法
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(二)
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(二)
99 0
|
5月前
|
存储 前端开发 JavaScript
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(一)
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(一)
515 0
|
5月前
|
前端开发
Canvas绘画之多边形画板,绘制多边形,携带背景图和绘画功能,带有全部清除的功能,用这个
Canvas绘画之多边形画板,绘制多边形,携带背景图和绘画功能,带有全部清除的功能,用这个
|
5月前
|
前端开发
Canvas绘画设计之网格线背景设置成网格源码
Canvas绘画设计之网格线背景设置成网格源码
|
5月前
|
Web App开发 前端开发
canvas系列教程04 —— 渐变、阴影、路径、状态、Canvas对象、图形重叠模式
canvas系列教程04 —— 渐变、阴影、路径、状态、Canvas对象、图形重叠模式
471 0
|
自然语言处理 前端开发 API
改变canvas生成的图片中文本颜色
改变canvas生成的图片中文本颜色
|
7月前
|
前端开发
canvas实现动态替换人物的背景颜色
canvas实现动态替换人物的背景颜色
|
存储 前端开发
canvas自定义绘制顺序解决遮挡问题
canvas自定义绘制顺序解决遮挡问题
257 0
|
前端开发 Android开发
【Android 应用开发】Canvas 精准绘制文字 ( 文本边界坐标解析 | 绘图位置 )
【Android 应用开发】Canvas 精准绘制文字 ( 文本边界坐标解析 | 绘图位置 )
342 0
【Android 应用开发】Canvas 精准绘制文字 ( 文本边界坐标解析 | 绘图位置 )