展示了由约塞米蒂照片的三部分图像组成的镜面效果伪3D贴图。
第一步，我们分割出塔夫托峰、默赛德河及埃尔卡皮坦山这3个正方形区域。结果被保存在icons数组中：
varicons=[
cliplcon(image,,00),cliplcon〈image,80),clipIcon(image,550,0]；函数clipIconO用于将不同尺寸的图像进行缩放和剪裁。我们首先创建一个大小为20像索的内存画布，然后通过drawImageO将适当缩减(或放大)的图片复制在上面，最后为它们加上15像素的白色边框：
varcliplcon=function(img,x,y,width>height){varcvs=document.createElement("CANVAS'1);varctx=cvs.getContext('2d');cvs.width=;cvs.height=;ctx.drawlmage(img,x,y,width,height,2);ctx.strokeStyle='mFFF';ctx.lineWidtn=15；
宁波网站建设认为ctx.strokeRect(2)；
returncvs;
}；
第二步，我们为这3个图像创建反射效果，并将其保存在effects数组中：vareffects=[];for(vari=0;i
varcreateReflection=function(icon){
varcvs=document.createElement(HCANVAS");varctx=cvs,getContext('2d');cvs.width=icon.width;cvs.height=icon.height/;//flipctx.translate(o,icon.height)j
ctx.scale(l,-l);
ctx.drawlmage(icon,0>0);
//fade
ctx.setTransform(l,0,0,);ctx.globalCompositeOperation="destination-out";vargrad=ctx.createLinearGradient(,icon.height/grad.addColorStop(0/rgba(.5)')；grad.addColorStop(l/rgba(.0)')；ctx.fillStyle=grad;ctx.fillRect(〇,0,icon.width,icon.height/2.〇)jreturncvs;}；在createReflection()中我们首先用另一个内存画布将icon中图像的下半部分翻转。变换矩阵用起来相当麻烦，所以也可以使用flipY()来完成翻转。不过在这里我们用来实现翻转的是另一种方法----------scale()。scale(l，-l)的效果等同于flipY()，而scale(-l，l)等同于flipX()。半透明白色到不透明白色的渐变可以实现淡出效果，并通过混合方法destination-out作用于指定图片。
定义完图像后，我们就可以开始着手绘制了。通过黑/白渐变，在画布中央形成了一个3D空间，我们在那里放入3个图像：
vargrad=context.createLinearGradient(
,canvas.height
grad.addColorStop(m');grad.addColorStop(0.5>'m'}；grad.addColorStop(/mEEE');context.fillStyle=grad;context.fillRect(0,0,canvas.width,canvas.height);中央的默赛德河照片处理起来最简单，我们通过setTransformO定位，然后为其加上一个反射效果：
context.setTransform(l,0,0,40,);context.drawlmageficons[ll,2);context.drawlmage(effects[l],,60);为了达到更好的3D效果，右边的埃尔卡皮坦山图像的宽度被缩放至,并用skewY()将其矩阵向下倾斜10°，然后将图像置于右中位置：
context.setTransform(,,);context.transform(l.Math.tan(0.)>,0,0)；context.scale(,l)；context.drawlmageficons[0);context.drawlmage(effects[2],,60);绘制左边的塔夫托峰图像较为麻烦。倾斜之后，这一部分的左上角形成了锚点，因此我们需要先将其向上倾斜10%,然后再向下移动。我们可以通过毕氏定理得出dy待定值：将弧旋转角度的切线乘以图片宽度中直线长度，因此计算为Math.tan()*。
另外，我们还需要将图像向右移动.1,以弥补其宽度被缩减至带来的变化：
contextsetTransform(,);context.transform^l,Math.tan(-),0,,0)；context.translate(.l,Math.tan(0.l75;*);context.scale(,l)；contextdrawImage(icons[0],2);contextdrawlmage(effects[0],,60);目前我们终于完成了最难的一个Canvas案例，结果令人印象非常深刻，因此最好是将它保存为JPEG或者PNG文件。与其他浏览器不同，Firefox上这个操作很简单——只需要右键单击画布便可以选择保存。不过如果你单击“查看图片”，将出现一个非常奇怪而又非常非常长的，以“data:image/png;base64...”开头的URL地址。
本文由乐华网络编辑，转载请注明出处
宁波网站建设www.leseo.net
