如何创建带有异形边框的图片库答案

【问题标题】：how to create a image gallery with shaped border如何创建带有异形边框的图片库
【发布时间】：2014-01-15 00:36:02
【问题描述】：

现在我正在处理一个带有形状图像边框here is the mock up 的图像库的项目，我不知道如何实现它。 SVG？帆布？有谁能帮帮我吗？

【问题讨论】：

标签： javascript html css canvas svg

【解决方案1】：

这是使用 html 画布的起始代码，供您学习。

想法是：

在画布上水平绘制多个图像。
将您的设计叠加在画布上，以便只显示一部分图像。
使用 requestAnimationFrame 更改图像的偏移量。
重复，重复，重复。

演示：http://jsfiddle.net/m1erickson/9v7ZF/

代码：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:20px; }
    canvas{border:1px solid red;}
</style>

<script>
    $(function(){

        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");

        var offsetX=-256;
        var direction=5;
        var fps = 60;


        var imageURLs=[];  // put the paths to your images here
        var imagesOK=0;
        var imgs=[];
        imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/store-show.png");
        imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/slide1.jpg");
        imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/slide2.jpg");
        loadAllImages();

        function loadAllImages(){
            for (var i=0; i<imageURLs.length; i++) {
                var img = new Image();
                imgs.push(img);
                img.onload = function(){ 
                    imagesOK++; 
                    if (imagesOK>=imageURLs.length ) {
                        animate();
                    }
                };
                img.onerror=function(){alert("image load failed");} 
                img.crossOrigin="anonymous";
                img.src = imageURLs[i];
            }      
        }


        function animate() {
            setTimeout(function() {
                requestAnimationFrame(animate);

                // Update the current offset of pictures
                if(offsetX<-256 || offsetX>0){
                    direction*=-1;
                }
                offsetX+=direction;

                // draw the pictures
                ctx.drawImage(imgs[1],offsetX,0);
                ctx.drawImage(imgs[2],offsetX+imgs[1].width,0);
                ctx.drawImage(imgs[0],0,0);


            }, 1000 / fps);
        }


    }); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=256 height=157></canvas>
</body>
</html>

【讨论】：

太好了，这就是我想要的，谢谢markE。还有一件事，其他不支持canvas标签的浏览器呢？

【解决方案2】：

创建一个只包含边框和一些外部空白和内侧的图像必须是透明的。

将保存画廊图像的 div 应该将此图像作为背景图像（您创建的新图像）。

设置这个容器div的固定高度和宽度，就是这样。你的工作完成了。希望你能完成这项工作。

【讨论】：