Question

考虑：

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

那些单位是像素吗？如果没有，是否有改变它的解决方法？

Answer 1

是的，这些单位总是以像素为单位，适用于canvas元素使用的位图。但是，如果使用CSS（即。style属性或使用样式表）没有在元素上定义大小，则元素将自动采用其位图的大小。

没有其他方法可以设置位图的大小而不是像素数。使用CSS只会改变元素本身的大小，而不是位图，可以扩展绘制到位图的任何内容以适应元素。

要使用其他单位，您必须使用JavaScript手动计算这些单位，例如：

// using % of viewport for canvas bitmap (pixel ratio not considered)
var canvas    = document.getElementById("myCanvas"),
    vwWidth   = window.innerWidth,
    vwHeight  = window.innerHeight,
    percent   = 60;

canvas.width  = Math.round(vwWidth  * percent / 100);  // integer pixels
canvas.height = Math.round(vwHeight * percent / 100);

// not to be confused with the style property which affects CSS, ie:
// canvas.style.width = "60%"; // CSS only, does not affect bitmap

如果您想支持视网膜，那么您需要使用window.devicePixelRatio并将其与尺寸相乘。在这种情况下，CSS也是必要的（与上面的代码结合）：

var pxRatio = window.devicePixelRatio || 1,
    width   = Math.round(vwWidth  * percent / 100), 
    height  = Math.round(vwHeight * percent / 100);

canvas.width  = width  * pxRatio;
canvas.height = height * pxRatio;

canvas.style.width  = width + "px";
canvas.style.height = height + "px";

Answer 2

HTML5中的几乎所有尺寸参数都以像素为单位。如果您在使用当前代码绘制画布时遇到问题，请尝试在最后取出自闭块：

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

您还可以考虑查看W3学校定义的canvas元素的属性：http://www.w3schools.com/html/html5_canvas.asp

Answer 3

使用css设置画布样式

 <canvas id="el"></canvas>

 <style>

    #el{
         display: block;
         width:100%;
         height: 100%;
     }     

 </style>

HTML5：画布宽度和高度

3 个答案: