HTML Canvas的相对大小

HTML5 <canvas>元素不接受其width和height属性的相对大小（百分比）。HTML Canvas的相对大小

我想要完成的是让我的画布相对于窗口大小。这是我想出到目前为止，但我不知道是否有这更好的办法：

简单
不需要在<div>包裹<canvas>。
不依赖于jQuery的（我用它来获取父div的宽/高）
理想情况下，浏览器调整大小不重绘（但我认为这可能是一个要求）

请参阅下面的代码，它在屏幕中间绘制一个圆圈，宽度为40％，最大为400px。

代码：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Canvas of relative width</title> 
    <style> 
     body { margin: 0; padding: 0; background-color: #ccc; } 
     #relative { width: 40%; margin: 100px auto; height: 400px; border: solid 4px #999; background-color: White; } 
    </style> 
    <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
    <script> 
     function draw() { 
      // draw a circle in the center of the canvas 
      var canvas = document.getElementById('canvas'); 
      var relative = document.getElementById('relative'); 
      canvas.width = $(relative).width(); 
      canvas.height = $(relative).height(); 
      var w = canvas.width; 
      var h = canvas.height; 
      var size = (w > h) ? h : w; // set the radius of the circle to be the lesser of the width or height; 
      var ctx = canvas.getContext('2d'); 
      ctx.beginPath(); 
      ctx.arc(w/2, h/2, size/2, 0, Math.PI * 2, false); 
      ctx.closePath(); 
      ctx.fill(); 
     } 

     $(function() { 
      $(window).resize(draw); 
     }); 
    </script> 
</head> 
<body onload="draw()"> 
    <div id="relative"> 
     <canvas id="canvas"></canvas> 
    </div> 
</body> 
</html>

来源

2011-08-24 Portman

画布width和height属性是从同一个画布width和height风格分开。 width和height属性是画布渲染表面的大小（以像素为单位），而其样式则选择文档中浏览器应从渲染表面绘制内容的位置。恰巧width和height样式的默认值（如果未指定）是渲染表面的宽度和高度。所以你对＃1是对的：没有理由把它包装在一个div中。您可以为canvas元素上的所有样式设置百分比值，就像任何其他元素一样。

对于＃3，只要不在canvas元素上使用填充，使用clientWidth和clientHeight获取大小是非常容易的（并且跨浏览器）。

我编码了一些简化版本here。

对于＃4，你说得对运气不错。可以在设置宽度和高度之前进行检查，如果不需要调整大小，就可以将画布留在原来的位置，这样可以消除一些重绘，但无法摆脱所有这些重绘。

编辑：波特曼指出，我弄乱了居中风格。更新版本here。

来源

2011-08-24 03:26:53 sethobrien

谢谢。有趣的是，如果你想把它放在中心，你看起来像* do *需要将'canvas'包装在'div'中。 'margin：0 auto'似乎并不像画一个div那样将画布居中。 – Portman

@Portman不，你还可以。我只是忘记把display：block放在canvas样式中（它的默认是inline-block，它不会以这种方式进行居中）。使用此修复程序更新答案。 – sethobrien

好的。这是我用来实现相同的技术。

假设你有画布高度= 400，对于窗口的高度= 480，和你想改变它的高度比较，如果窗口的高度更改为640

canvas = document.getElementById("canvas"); 
canvas.height=window.innerHeight*400/480;

PS：不初始化html标签内的画布高度。

利用'window.innerHeight'（它返回浏览器窗口的高度..类似'window.innerWidth'）任何你想要计算窗口上相对位置的地方。

希望你有你需要的东西。

来源

2011-08-24 08:14:11 Sri

像sethobrien所说的一个canvas元素有两个对属性的宽度/高度。

canvas.width/canvas.height约为在于将包含绘图命令的结果缓冲器的像素的大小。
canvas.style.width/canvas.style.height大约是用于在浏览器窗口中显示画布对象的大小，它们可以位于任何由css支持的单位中。

事实上，你可以设置canvas.width和canvas.height只有一次，做绘图画布，设置百分比的风格尺寸参数，然后忘掉重绘帆布内容。当然，这意味着浏览器只会像从网络加载的常规图像那样进行缩放，因此可见结果将显示像素缩放工件。

只有当您想要像素完美的结果时，您只需在画布元素调整大小后重新绘制画布内容。

来源

2011-08-24 08:28:31 6502

HTML Canvas的相对大小

回答

相关问题