上一节介绍了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个参数设置源图像中的位置和高度宽度。这些参数允许你在显示图像前动态裁剪源图像。 下面是上述三个使用方法的例子:
可以把上面代码放置在文档head部分中,或者放在外部JavaScript文件中。 像素级操作 2D Context API提供了三个方法用于像素级操作:createImageData,getImageData和putImageData。 ImageData对象保存了图像像素值。每个对象有三个属性: width,height和data。data属性类型为CanvasPixelArray,用于储存width*height*4个像素值。每一个像素 有RGB值和透明度alpha值(其值为0至255,包括alpha在内。)。像素的顺序从左至右,从上到下,按行存储。 来看一个例子:
注意:不是所有浏览器都实现了createImageData。在支持的浏览器中,需要通过getImageData方法获取ImageData对象。 通过ImageData可以完成很多功能。如可以实现图像滤镜,或可以实现数学可视化 (如分形和其他特效)。来看一个实例:
可以把上面代码放置在文档head部分中,或者放在外部JavaScript文件中。 下一节继续讲H5:画布Canvas基础知识讲解(三)之文字、阴影、颜色渐变。 |
|
来自: zhulin1028 > 《待分类》