在Canvas HTML5中填充带有图像和拉伸图像的路径 [英] Fill a path with image and stretch image in Canvas HTML5
问题描述
我想用图像填充像圆圈或自定义路径的路径但想要拉伸图像，以便图像的像素不会位于闭合路径之外。
这可以使用Canvas对象在HTML5中实现吗？
I wanna to fill a path like a circle or a custom path with an image but wanna the image to stretch, so that the pixels of the image don't reside outside the closed path. Is this possible to achieve in HTML5 using the Canvas object ?
这是我的自定义路径：
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();
我想要实现的是用图像填充云，但要拉伸它。如果它看起来很难看并不重要。
What I wanna to achieve is to fill the cloud with an image but stretch it. Doesn't matter if it look ugly.
推荐答案
[根据OP提供的更多信息进行编辑]
ima.js ，是一个小图像脚本，它将组合2个图像：
ima.js, is a small image script that will combine 2 images like this:
进入像这样使用画布的单个扭曲包络图像：
Into a single warp-envelope image like this using canvas:
您可以在以下位置查看演示： http://ima.hobby.infi.nl/#
You can see a demo at: http://ima.hobby.infi.nl/#
该脚本位于： http://ima.hobby.infi.nl/ima.js
[OP之前的回答添加了更多信息]
你可以剪辑路径中的图像。
You can clip an image inside of a path.
是的，你可以st retch像这样的小尺寸图像：
And yes, you can "stretch" an undersized image like this:
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中填充带有图像和拉伸图像的路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
