Question

如何使用meteor创建一个完整的窗口画布？

我对HTML5画布元素相当新，经过不同的教程和一些尝试我可以完成所有基本的东西，但我现在对这个完整的窗口问题感到困扰了几个小时，并且无法找到解决方案

使用以下代码

Template.canvasT.rendered = function(){
    var canvas = $("#canvas");
    canvas.css('width', $(window).innerWidth());
    canvas.css('height', $(window).innerHeight());
    ctx = canvas[0].getContext('2d');

    ; some drawing
}

创建缩放效果，没有怎么办？感谢。

完整窗口画布的代码来自： Meteor: How to Get Context of an HTML5 Canvas Element

MeteorPad包含完整的代码和问题。

Answer 1

原因是有一个缩放效果是因为你正在操纵canvas元素的CSS属性而不是它的width和height属性。

尝试：

DTemplate.canvasT.rendered = function(){
    var canvas = $("#canvas")[0];
    canvas.width = $(window).innerWidth();
    canvas.height = $(window).innerHeight();
    ctx = canvas.getContext('2d');

    ; some drawing
}

Answer 2

在另一个回答指出我正确的方向后，我终于弄明白了。

设置html标记属性和 css样式属性：

Template.canvasT.rendered = function(){
    var canvas = $("#canvas");
    canvas.attr('width',$(window).innerWidth());
    canvas.attr('height',$(window).innerHeight());

    canvas.css('width',$(window).innerWidth() + "px");
    canvas.css('height',$(window).innerHeight() + "px");
}

如何用流星创建全窗口画布？

2 个答案: