网页设计与开发第5章图形图像处理技术.ppt

source-over 这是默认设置，表示新图形会覆盖在原有图形之上。效果如下图所示。 destination-over 表示会在原有图形之下绘制新图形。效果如下图所示。 5.6 给图形绘制阴影 在HTML中，使用canvas元素可以给图形添加阴影效果。添加阴影效果时，只需利用图形上下文对象的几个关于阴影绘制的属性就可以了，如下所示： shadowOffsetX：阴影的横向位移量 shadowOffsetY：阴影的纵向位移量 shadowBlur：阴影的模糊范围 shadowColor：阴影的颜色 shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，他们默认都是 0。 shadowBlur 用于设定阴影的模糊程度，它表示图形阴影边缘的模糊范围。如果不希望阴影的边缘太清晰，需要将阴影的边缘模糊化时可以使用该属性。设定该属性值时必须要设定为比0大的数字，否则将被忽略。一般设定在0至10之间，开发时可以根据情况调整这个数值，以达到满意效果。 shadowColor 用于设定阴影效果的延伸，值可以是标准的 CSS 颜色值，默认是全透明的黑色。 【例5-15】 下面这个实例绘制了带阴影效果的文字。效果如图5-17所示。 图5-17 给文字绘制阴影的效果 本例实现的主要代码如下所示。 function draw(id) { var context = document.getElementById(canvas).getContext(2d); context.shadowOffsetX = 2; context.shadowOffsetY = 2; context.shadowBlur = 2; context.shadowColor = rgba(0, 0, 0, 0.5); context.font = 20px Times New Roman; context.fillStyle = Black; context.fillText(mingrisoft, 5, 30); } 5.7 图像的应用 5.7.1 图像的局部放大 5.7.2 图像平铺 5.7.3 图像裁剪 5.7.4 像素的处理 5.7.1 图像的局部放大 当我们装载完图像以后，想对图像的某一部分进行局部放大时，可以使用如下方法实现。 drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 【例5-16】 下面通过一个实例来具体讲解该方法是如何实现图像的局部放大的。本例中将卡通人物的头部放大。运行效果如图5-18所示。 图5-18 图像的局部放大效果 本例实现的主要代码如下所示。 function draw(id) { var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext(2d); context.fillStyle = red; context.fillRect(0, 0, 400, 300); image = new Image(); image.src = imagemr.jpg; image.onload = function() { drawImg(context,image); }; } function drawImg(context,image) { var i=0; //首先调用该方法绘制原始图像 context.drawImage(image,0,0,100,100); //绘制将局部区域进行放大后的图像 context.drawImage(image,23,5,57,90,110,0,100,100); } 5.7.2 图像平铺 在讲到绘制图像的时候，有一个非常重要的功能，就是图像平铺技术。所谓图像平铺就是用按一定比例缩小后的图像将画布填满，有两种方法可以实现该技术，一种是使用前面所介绍的drawImage方法，另一种是使用图形上下文对象的createPattern