Javascript 如何创建具有成型边框的图像库_Javascript_Html_Css_Canvas_Svg

Javascript 如何创建具有成型边框的图像库

javascript html css canvas svg

Javascript 如何创建具有成型边框的图像库,javascript,html,css,canvas,svg,Javascript,Html,Css,Canvas,Svg,现在我正在做一个项目，有一个图像库，有一个成型的图像边框，我不知道如何实现它。SVG？帆布？任何人都可以给我帮助吗？创建一个只包含边框的图像，一些外部空白和内部必须是透明的保存库图像的div应将此图像作为背景图像（您创建的新图像）设置此容器div的固定高度和宽度，就是这样。你的工作完成了。希望您能完成此操作。这里是使用html画布的开始代码，供您学习。这个想法是：在画布上水平绘制多个图像将您的设计覆盖在画布上，以便只显示部分图像使用requestAnimationFrame更改图像

现在我正在做一个项目，有一个图像库，有一个成型的图像边框，我不知道如何实现它。SVG？帆布？任何人都可以给我帮助吗？

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

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

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

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

这个想法是：

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

演示：

代码：


正文{背景色：象牙色；填充：20px；}
画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var offsetX=-256；
var方向=5；
var fps=60；
var imageURLs=[]；//将图像的路径放在此处
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（）{
for（var i=0；i=imageURL.length）{
制作动画（）；
}
};
img.onerror=function（）{alert（“映像加载失败”）；}
img.crossOrigin=“匿名”；
img.src=imageURL[i]；
}      
}
函数animate（）{
setTimeout（函数（）{
请求动画帧（动画）；
//更新图片的当前偏移量
if（offsetX0）{
方向*=-1；
}
偏移量x+=方向；
//画画
ctx.drawImage（imgs[1]，offsetX，0）；
ctx.drawImage（imgs[2]，offsetX+imgs[1]。宽度，0）；
ctx.drawImage（imgs[0]，0,0）；
}，1000/帧）；
}
}); // end$（函数（）{}）；

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

<!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>