HTML5：画布的宽度和高度

debugcn 发表于 Dev

阿隆

考虑：

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

这些单位是像素吗？如果没有，是否有解决方法来更改它？

用户名

是的，这些单位始终以像素为单位，并且适用于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";

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。