Question

canvas 自适应屏幕的问题，能否铺满整个屏幕，并且画布不是等比例放大？

Answer 1

• 能。具体参考以下方法：

1. 直接设置canvas的style。width:100%;height:100%试试。
   <canvas width="100" height="100" style="background-color: #ff0000;width:100%;height:100%;"></canvas>。

2. 可以用JS监控屏幕大小，然后调整Canvas的大小。在代码中加入JS
   $(window).resize(resizeCanvas);
   function resizeCanvas()

   {canvas.attr("width", $(window).get(0).innerWidth);
   canvas.attr("height", $(window).get(0).innerHeight);
   context.fillRect(0, 0, canvas.width(), canvas.height());};
   resizeCanvas();
   就可以了。
   <canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
   

• Canvas 对象表示一个 HTML 画布元素 -<canvas>。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。

• 你可以直接在该对象上指定宽度和高度，但是，其大多数功能都可以通过CanvasRenderingContext2D 对象获得。 这是通过 Canvas 对象的getContext() 方法并且把直接量字符串 "2d" 作为唯一的参数传递给它而获得的。

• <canvas> 标记在 Safari 1.3 中引入，在制作此参考页时，它在 Firefox 1.5 和 Opera 9 中也得到了支持。在 IE 中，<canvas> 标记及其 API 可以使用位于excanvas点sourceforge点net的 ExplorerCanvas 开源项目来模拟。

• 提示：如果希望学习如何使用 <canvas> 来绘制图形，可以访问 Mozilla 提供的Canvas 教程（英文）以及相应的中文 Canvas 教程。

Answer 2

能。
直接设置canvas的style。width:100%;height:100%试试。
<canvas width="100" height="100" style="background-color: #ff0000;width:100%;height:100%;"></canvas>

Answer 3

jquery的代码如下：
$("canvas").attr("width",window.innerWidth);
$("canvas").attr("height",window.innerHeight);
注意width和height不用加单位“px”！