倒影
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>图片倒影效果- Beautiful Style « 样式之美 » loaoao.com </title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="KEYWords" content="Reflection,canvas,filter,css,xhtml,effect" /><meta name="DEscription" content="图片倒影效果: IE是滤镜做的的.Firefox1.5+ ,Opera9+ 是用canvas来处理的" /><meta name="author" content="aoao" /><meta content="all" name="robots" /><link rel="start" href="http://http://www.alixixi.com/web/a/www.loaoao.com" title="Home" /><script type="text/javascript"> var draw=function(){ var img=document.getElementById("gundam"); var doc =document.getElementById("reflection"); if (document.all && !window.opera) { var draw = document.createElement("DIV"); draw.setAttribute("className","draw"); doc.appendChild(draw); } else{ var canvas = document.createElement("canvas"); canvas.setAttribute("width",img.width); canvas.setAttribute("height",img.height); doc.appendChild(canvas); if (canvas.getContext){ var test = canvas.getContext("2d"); test.translate(0,img.height); test.scale(1,-1); test.drawImage(img, 0, 0,img.width,img.height); //test.globalCompositeOperation = "destination-out"; var gradient = test.createLinearGradient(0, 0, 0, img.height); gradient.addColorStop(0, "rgba(255, 255, 255, 1.0)"); gradient.addColorStop(1, "rgba(255, 255, 255, 0)"); test.fillStyle = gradient; test.fillRect(0,0,img.width,img.height); } } } window.onload = draw;</script><style type="text/css"> #reflection{ width:300px; margin:0 auto; } #gundam{ display:block; } .draw{ width:262px; height:240px; color:red; background:url("/UploadPic/2007-4/200741151936782.jpg") no-repeat ; filter:FlipV progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFFFF', endColorStr='#00000000', gradientType='0'); /*progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)*/ }</style></head><body><h1>图片倒影效果</h1><p>IE是滤镜做的的.Firefox1.5+ ,Opera9+ 是用canvas来处理的.传说 Safari也支持canvas,可惜我没环境.<br />做完后才发现...原来人家早就把他封装好了...<a href="http://cow.neondragon.net/stuff/reflection/" title="Reflection.js 1.6 " >reflection 1.6</a>. 不过..重要的是我在过程学到东西..</p><div id="reflection"><img id="gundam" src="/UploadPic/2007-4/200741151936782.jpg"/></div><p>canvas的相关资料<a href="http://developer.mozilla.org/en/docs/Canvas_tutorial">http://developer.mozilla.org/en/docs/Canvas_tutorial</div></a></p><p id="copyright">Copyright 2006 <a rel="me" href="http://http://www.alixixi.com/web/a/www.loaoao.com/" title="Beautiful Style « 样式之美 » http://www.alixixi.com/web/a/www.loaoao.com">aoao</a> . <a rel="license" href="http://creativecommons.org/licenses/by/2.5/" title="知识共享组织">Some rights reserved</a>.</p></body></html>
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索canvas
， img
， test
， document
， height
倒影
ppt图片倒影效果、ai怎么做图片倒影效果、android 图片倒影效果、ps图片倒影效果怎么做、ps图片倒影效果，以便于您获取更多的相关知识。
时间： 2024-08-12 13:03:35