我试图将图像映射到使用strokeStyle和canvas模拟布料的"3d"网格,我有包含的图像,但它目前充当背景图像而不是实际上流动的"布",因为是涟漪,IE当网格流动时,图像是静态的.这里是自我解释的jsfiddle(仅适用于Chrome).任何帮助深表感谢.这里是将图像渲染到背景中的javascript,如何停止渲染为背景图像并仅使其填充网格?:
function update() {
var img = new Image();
img.src = 'http://free-textures.got3d.com/architectural/free-stone-wall- textures/images/free-stone-wall-texture-002.jpg';
img.onload = function() {
// create pattern
var ptrn = ctx.createPattern(img, 'repeat');
ctx.clearRect(0, 0, canvas.width, canvas.height);
physics.update();
ctx.strokeStyle = ptrn;
ctx.beginPath();
var i = points.length;
while (i--) points[i].draw();
ctx.stroke();
requestAnimFrame(update);
}
}
Run Code Online (Sandbox Code Playgroud)
她是我工作的原始代码.`更新小提琴与图像外侧的功能更新():目前,它似乎确实填补细胞以及把它当成一个背景图像.有没有办法阻止它成为背景图像,只应用它来填充网格?我试过这个:
ctx.fillStyle = ptrn; 并删除第260行:
ctx.strokeStyle = ptrn; 但它似乎删除了背景图像只是将其显示为黑色网格...再次感谢您的耐心