Question

我现在正在使用HTML5 Canvas。我有一个图像文件和一个马克杯图像文件。我希望在圆柱面上绘制图像文件。类似下面的图片。

enter image description here

是否有任何可以帮助我存档的Javascript画布（或SVG）库？

非常感谢

Answer 1

您可以通过将图像切成1px宽的垂直切片并更改每个切片的“Y”坐标以适应杯子的曲线来实现“包裹”效果。

这是使用此技术“拉伸”图像的示例代码。

随意修改此代码以适应您的杯子曲线。

enter image description here

示例代码和演示：http://jsfiddle.net/m1erickson/krhQW/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

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

    var img=new Image();
    img.onload=start;
    img.src="https://dl.dropboxusercontent.com/u/139992952/warp.png";
    function start(){

        var iw=img.width;
        var ih=img.height;
        canvas.width=iw+20;
        canvas.height=ih+20;

        var x1=0;
        var y1=50;
        var x2=iw;
        var y2=0
        var x3=0;
        var y3=ih-50;
        var x4=iw;
        var y4=ih;

        // calc line equations slope & b (m,b)
        var m1=Math.tan( Math.atan2((y2-y1),(x2-x1)) );
        var b1=y2-m1*x2;
        var m2=Math.tan( Math.atan2((y4-y3),(x4-x3)) );
        var b2=y4-m2*x4;

        // draw vertical slices
        for(var X=0;X<iw;X++){
            var yTop=m1*X+b1;
            var yBottom=m2*X+b2;
            ctx.drawImage( img,X,0,1,ih, X,yTop,1,yBottom-yTop );
        }

        // outline
        ctx.beginPath();
        ctx.moveTo(x1,y1);
        ctx.lineTo(x2,y2);
        ctx.lineTo(x4,y4);
        ctx.lineTo(x3,y3);
        ctx.closePath();
        ctx.stroke();
    }

}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

HTML画布（SVG） - 在圆柱表面上绘制图像

1 个答案: