我想用图像填充像圆形或自定义路径的路径,但想要将图像拉伸,以使图像的像素不位于闭合路径之外。 这可以使用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();
我想要实现的是用图像填充云,但要拉伸它。如果它看起来很难看并不重要。
答案 0 :(得分:5)
[根据OP提供的更多信息进行编辑]
ima.js ,是一个小图像脚本,它将组合2个图像:
使用canvas:
进入这样的单个warp-envelope图像
您可以在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>