HTML画布（SVG） - 在圆柱表面上绘制图像 [英] HTML Canvas (SVG) - Draw image on cylinder surface
本文介绍了HTML画布（SVG） - 在圆柱表面上绘制图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我现在使用HTML5 Canvas。我有一个图像文件和一个杯子图像文件。我想要的图像文件绘制在该柱面上。类似下面的图片。
I'm working with HTML5 Canvas now. I have one image file and and a mug image file. I want the image file to be drawn on that cylinder surface. Something like the images below.
非常感谢你
推荐答案
您可以通过将图像切成1px宽的垂直切片，并更改每个切片的Y坐标以适应您杯子的曲线，实现您的换行效果。
You can achieve your "wrap" effect by slicing your image into 1px wide vertical slices and changing the "Y" coordinate of each slice to fit the curve of your cup.
这里是使用这种技术拉伸图像的示例代码。
Here's example code that uses this technique to "stretch" an image.
随意修改此代码以适应您杯子的曲线。
Feel free to modify this code to fit along the curve of your cup.
示例代码和演示： 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） - 在圆柱表面上绘制图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
