Question

我有这个代码，每次更改参数（c）之一时都会运行。（它是某种无缝纹理生成器，为了更好地理解我想要的东西）：

class drawPreview 
    constructor: (c) ->
        pic = new Image()
        pic.src = $("#sample_file").attr('src')
        canvas = document.getElementById("preview_canvas")
        context = canvas.getContext("2d")
        img_w = $("#sample_file").attr('width')
        img_h = $("#sample_file").attr('height')
        tiles = Math.floor(img_w / c.w) + 1
        for i in [0..tiles]
            console.log('t')
            context.width = context.width
            context.drawImage(pic, c.x, c.y, c.w, c.h, c.w*i, 0, c.w, c.h)

这在Firefox中运行良好（有些滞后）。但是在Chrome中，它会冻结一段时间并以同样的方式解冻。有没有办法让用户的行为更明智？

Answer 1

如果仅参数更改为“C”，则将所有代码移到此块之外。

移出下面的代码，应该调用一次。

        pic = new Image()
        pic.src = $("#sample_file").attr('src')
        canvas = document.getElementById("preview_canvas")
        context = canvas.getContext("2d")
        img_w = $("#sample_file").attr('width')
        img_h = $("#sample_file").attr('height')

上述操作可能成本高昂。

HTML5画布重绘参数更改

1 个答案: