Question

我想用图像填充像圆形或自定义路径的路径，但想要将图像拉伸，以使图像的像素不位于闭合路径之外。这可以使用Canvas对象在HTML5中实现吗？

这是我的自定义路径：

ctx.beginPath();
    ctx.moveTo(170, 80);
    ctx.bezierCurveTo(130, 100, 130, 150, 230, 150);
    ctx.bezierCurveTo(250, 180, 320, 180, 340, 150);
    ctx.bezierCurveTo(420, 150, 420, 120, 390, 100);
    ctx.bezierCurveTo(430, 40, 370, 30, 340, 50);
    ctx.bezierCurveTo(320, 5, 250, 20, 250, 50);
    ctx.bezierCurveTo(200, 5, 150, 20, 170, 80);

    // complete custom shape
    ctx.closePath();
    ctx.lineWidth = 5;

    ctx.fillStyle = '#8ED6FF';
    ctx.fill();

    ctx.strokeStyle = 'blue';
    ctx.stroke();

我想要实现的是用图像填充云，但要拉伸它。如果它看起来很难看并不重要。

Answer 1

[根据OP提供的更多信息进行编辑]

ima.js ，是一个小图像脚本，它将组合2个图像：

enter image description here

使用canvas：

进入这样的单个warp-envelope图像

enter image description here

您可以在http://ima.hobby.infi.nl/#

看到演示

该脚本位于：http://ima.hobby.infi.nl/ima.js

[OP之前的回答添加了更多信息]

您可以在路径内剪辑图像。

是的，你可以像这样“伸展”一个尺寸不足的图像：

context.drawImage(image,0,0,image.width,image.height,0,0,canvas.width,canvas.height);

这是代码和小提琴：http://jsfiddle.net/m1erickson/T4eN8/

<!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");

    // draw the cloud
    ctx.beginPath();
    ctx.moveTo(170, 80);
    ctx.bezierCurveTo(130, 100, 130, 150, 230, 150);
    ctx.bezierCurveTo(250, 180, 320, 180, 340, 150);
    ctx.bezierCurveTo(420, 150, 420, 120, 390, 100);
    ctx.bezierCurveTo(430, 40, 370, 30, 340, 50);
    ctx.bezierCurveTo(320, 5, 250, 20, 250, 50);
    ctx.bezierCurveTo(200, 5, 150, 20, 170, 80);
    ctx.closePath();
    ctx.lineWidth = 5;
    ctx.fillStyle = '#8ED6FF';
    ctx.fill();
    ctx.strokeStyle = 'blue';
    ctx.stroke();

    // clip any subsequent draws to the cloud
    ctx.beginPath();
    ctx.moveTo(170, 80);
    ctx.bezierCurveTo(130, 100, 130, 150, 230, 150);
    ctx.bezierCurveTo(250, 180, 320, 180, 340, 150);
    ctx.bezierCurveTo(420, 150, 420, 120, 390, 100);
    ctx.bezierCurveTo(430, 40, 370, 30, 340, 50);
    ctx.bezierCurveTo(320, 5, 250, 20, 250, 50);
    ctx.bezierCurveTo(200, 5, 150, 20, 170, 80);
    ctx.closePath();
    ctx.clip();

    // draw an image inside the cloud
    var img=new Image();
    img.onload=function(){
        ctx.drawImage(this,0,0,img.width,img.height);
    }
    img.src="http://www.gcc.edu/_layouts/GCC/Backgrounds/1024.jpg";

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

</head>

<body>
    <canvas id="canvas" width=600 height=400></canvas>
</body>
</html>

在Canvas HTML5中填充带有图像和拉伸图像的路径

1 个答案: