Question

现在我正在开发一个带有形状图像边框here is the mock up的图像库的项目，我不知道如何实现它。 SVG？帆布？任何人都可以给我帮助吗？

Answer 1

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

将保留图库图像的div应将此图像作为背景图像（您创建的新图像）。

设置此容器div的固定高度和宽度，就是这样。你的工作已经完成。希望你能完成这件事。

Answer 2

以下是使用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>

如何创建具有形状边框的图库

2 个答案: