相关疑难解决方法(0)

html5 canvas strokeStyle?

我试图将图像映射到使用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; 但它似乎删除了背景图像只是将其显示为黑色网格...再次感谢您的耐心

javascript html5 2d canvas

25
推荐指数
1
解决办法
4651
查看次数

标签 统计

2d ×1

canvas ×1

html5 ×1

javascript ×1