0

我想用图像填充像圆形或自定义路径这样的路径，但想要拉伸图像，以便图像的像素不会位于封闭路径之外。这可以使用 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();

我想要实现的是用图像填充云但拉伸它。长得丑也没关系。

4

1 回答 1

5

[根据来自 OP 的更多信息进行编辑]

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

在此处输入图像描述

使用画布进入像这样的单个经线包络图像：

在此处输入图像描述

您可以在以下位置查看演示：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>
于 2013-03-01T22:03:11.100 回答