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

发布于 2024-12-04 05:52:11 字数 761 浏览 2 评论 0原文

我想将画布的尺寸调整为比实际尺寸更小的尺寸。这是我的代码：

             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_);

但这不起作用。有人知道为什么吗？画布不会调整为新尺寸。

原文

I would like to resize the canvas to a smaller dimension than what it is. Here is my code:

             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_);

Yet this doesn't work. Anyone know why? The canvas doesn't resize to the new dimensions.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

乖不如嘢 2024-12-11 05:52:11

您需要首先调用缩放：

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);
}

想一想，就像您需要缩小画布一样。然后在较小的画布上绘制。
示例

You need to call scale first:

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);
}

Think about it, like you need to scale you canvas down. Then draw on the smaller canvas.
Example

回复收藏 0 原文

~没有更多了~