Question

我想将画布调整到比它更小的尺寸。这是我的代码：

             var modelPane = document.getElementById('model_pane');


        //create canvasclass="modelview"
        var canvas_ = document.createElement('canvas');
        canvas_.setAttribute('width', 1160);
        canvas_.setAttribute('height', 500);
        canvas_.setAttribute('id', 'canvas');
        canvas_.setAttribute('class', 'modelview');
        var ctx_ = canvas_.getContext('2d');

        //draw
        for (i=0;i<nodes.length;i++)
                            {
            ctx_.strokeRect(nodes[i].x,  nodes[i].y, nodes[i].width, nodes[i].height);


    }

        //scale
        ctx_.scale(0.3,0.3);
    modelPane.appendChild(canvas_);

然而这不起作用。谁知道为什么？画布不会调整为新尺寸。

Answer 1

您需要先调用scale：

var ctx_ = canvas_.getContext('2d');
ctx_.scale(0.3,0.3);
//draw
for (i=0;i<nodes.length;i++)
    ctx_.strokeRect(nodes[i].x,  nodes[i].y, nodes[i].width, nodes[i].height);
}

想一想，就像你需要缩小画布一样。然后画在较小的画布上。 Example

如何在HTML5中调整画布的大小？

1 个答案: