Question

我有.aspx页面，我想用JS绘制整个文档。我是JS的新手...... 例如，这段代码（在我的aspx中）允许我绘制200x200区域：

    <canvas id="canvas" width="200" height="200"></canvas>

    <script type ="text/javascript">
    $(document).ready(function () {
    ctx = document.getElementById('canvas').getContext('2d');       
    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    ctx.fillRect(30, 30, 55, 50);
    });
    </script>

如何绘制整个文档？因为我不能写出像：

   <canvas id="canvas" $(document).width() $(document).height()></canvas>

我想在整个文档上绘制一个透明的矩形，并查看后面的页面内容。

这是解决方案（thnx to kirilloid）： CSS：

    #canvas {
    position: absolute;
    left: 0;
    top: 0;
    }

JS：

    function updateCanvas(width,height) {
    var $canvas = $("#canvas");
    $canvas.attr('width', $(document).width())
    $canvas.attr('height', $(document).height());
    var ctx = $canvas.get(0).getContext('2d');
    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    ctx.fillRect(0, 0, width, height/2);
    ctx.fillStyle = "rgba(0, 200, 0, 0.5)";
    ctx.fillRect(0, height/2, width, height);
    }

    $(document).ready(function () {
    updateCanvas($(document).width(), $(document).height())
    });

Answer 1

没有办法在页面上绘图。您需要使画布适合整个窗口并在窗口调整大小时更新其大小（和重绘）。

如果在CSS中更改其大小，画布只会像图像一样拉伸。如果您更改width和height属性，则会将其清除。

CSS：

#canvas {
    position: fixed;
    left: 0;
    top: 0;
}

代码：

function updateCanvas() {
    var $canvas = $("#canvas");
    $canvas.attr('width', $(document).width())
    $canvas.attr('height', $(document).height());
    var ctx = $canvas.get(0).getContext('2d');
    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    ctx.fillRect(30, 30, 55, 50);
}
$(window).on('resize', updateCanvas); // maybe, add some thresholding
updateCanvas();

UPD：刚刚提出了更高效的解决方案：从window.screen设置画布大小并将其放入overflow: hidden容器装配整个窗口。然后你根本不需要重绘或调整画布大小（多显示器用户仍然是个问题）。

如何将canvas应用于整个文档或如何在整个文档上绘制？

1 个答案: