网页设计作业中应用图像_学生网页设计制作作业_网页制作作业成品_网页设计作业_计算机毕业设计_php作业_asp作业_网页模板

热点资讯更多

网页设计作业中应用图像

我们在制作网页设计作业时，应用图像是一个重要技能，下面是对其的介绍

绘制图像
绘制图像时，需要使用drawImage方法，该方法的定义如下所示。

第一种方法只使用三个参数，第一个参数可以是一个img元素、一个video元素，或者一个JavaScript中的image对象，使用该参数代表的实际对象来装载图像文件。x与y为绘制时该图像在画布中的起始坐标。第二种方法中前三个参数的使用方法与第一种方法中的使用方法一样，width、 height是指绘制时的图像的宽度与高度。使用第一种方法绘制出来的图像与原图大小相同，而使用第二种方法可以用来进行图像缩放。第三种方法可以用来将画布中已绘制的图像的全部或者局部区域复制到画布中的另一个位置上。该方法使用九个参数，image仍然代表被复制的图像文件，sx与sy分别表示源图像的被复制区域在画布中的起始横坐标与起始纵坐标，sWidth与sHeight表示被复制区域的宽度与高度，dx与dy表示复制后的目标图像在画布中的起始横坐标与起始纵坐标，dWidth与dHeight表示复制后的目标图像的宽度与高度。该方法可以只复制图像的局部，只要将sx与sy设为局部区域的起始点坐标，将sWidth与 sHeight设为局部区域的宽度与高度就可以了。该方法也可以用来将源图像进行缩放，只要将dWidth与dHeight设为缩放后的宽度与高度就可以了。

绘制图像的步骤
首先使用不带参数的new方法创建image对象，然后设定该image对象的src属性为需要绘制的图像文件的路径，具体代码如下所示。

然后就可以使用drawImage方法绘制该图像文件了。事实上，即使设定好Image对象的src属性后，也不一定立刻就能把图像绘制完毕，譬如有时该图像文件是一个来源于网络的比较大的图像文件，这时用户就要有足够的耐心等待图像全部装载完毕才能看见该图像了。这种情况下，只要使用如下所示的方法，就可以解决这个问题了。

在image对象的onload事件中同步执行绘制图像的函数，就可以一边装载一边绘制了。

图像的局部放大
图片的局部放大，可以使用如下方法实现。

图像平铺
所谓图像平铺就是用按一定比例缩小后的图像将画布填满，有两种方法可以实现该技术，一种是使用前面所介绍drawImage方法，另一种是使用图形上下文对象的createPattern方法，该方法定义如下所示。
context.createPattern(image,type);
该方法使用两个参数，image参数为要平铺的图像，type参数的值必须是下面的字符串之一：
no-repeat：不平铺
repeat-x：横方向平铺
repeat-y：纵方向平铺
repeat：全方向平铺

图像裁剪
canvas API的图像裁剪功能是指，在画布内使用路径，只绘制该路径所包括区域内的图像，不绘制路径外部的图像。使用图形上下文对象的不带参数的clip方法来实现canvas 元素的图像裁剪功能。该方法使用路径来对canvas 画布设置一个裁剪区域。因此，必须先创建好路径。路径创建完成后，调用clip方法设置裁剪区域。

像素的处理
使用图像上下文对象的getImageData方法来获取图像中的像素，该方法的定义如下所示。
var imagedata = context.getImageData(sx,sy,sw,sh);
该方法使用四个参数，sx、sy分别表示所获取区域的起点横坐标、起点纵坐标，sw、sh分别表示所获取区域的宽度和高度。Imagedata变量是一个CanvasPixelArray对象，具有height，width，data等属性。data属性是一个保存像素数据的数组，内容类似于“[r1,g1,b1,a1, r2,g2,b2,a2, r3,g3,b3,a3,…]”,其中，r1,g1,b1,a1为第一个像素的红色值，绿色值，蓝色值，透明值；r2,g2,b2,a2分别为第二个像素的红色值，绿色值，蓝色值，透明值，依次类推。data.length为所取得像素的数量。

图片反显使用的函数
图像上下文对象的putImageData方法
该方法的定义如下所示：

该方法使用七个参数，imagedata为前面所述的像素数组，dx、dy分别表示重绘图像的起点横坐标，起点纵坐标，后面dirtyX、dirtyY、dirtyWidth、 dirtyHeight这四个参数为可选参数，给出一个矩形的起点横坐标、起点纵坐标、宽度与高度，如果加上这四个参数，则只绘制像素数组中这个矩形范围内的图像。

上一篇：网页设计作业中给图形绘制阴影

下一篇：网页设计作业中绘制文字

分享到： QQ空间新浪微博腾讯微博人人网更多