gpt4 book ai didi

javascript - 相对大小的 HTML Canvas

转载 作者:技术小花猫 更新时间:2023-10-29 12:47:45 24 4
gpt4 key购买 nike

HTML5 <canvas> 元素不接受其 width 的相对大小(百分比)和 height特性。

我想要完成的是让我的 Canvas 大小相对于窗口。到目前为止,这是我想出的,但我想知道是否有更好的方法:

  1. 更简单
  2. 不需要包装 <canvas><div> .
  3. 不依赖于 jQuery(我用它来获取父 div 的宽度/高度)
  4. 理想情况下,不要在浏览器调整大小时重绘(但我认为这可能是一项要求)

请参阅下面的代码,该代码在屏幕中间绘制一个圆圈,宽度为 40%,最大为 400 像素。

现场演示:http://jsbin.com/elosil/2

代码:

<!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>

最佳答案

Canvas 的 widthheight 属性与同一 Canvas 的 widthheight 样式是分开的。 widthheight 属性是 Canvas 渲染表面的大小,以像素为单位,而它的样式选择文档中浏览器应该从渲染中绘制内容的位置表面。 widthheight 样式的默认值,如果未指定,就是渲染表面的宽度和高度.所以你对#1 的看法是正确的:没有理由将它包装在一个 div 中。您可以为 Canvas 元素上的所有样式设置百分比值,就像任何其他元素一样。

对于 #3,只要您不在 canvas 元素上使用填充,就可以很容易(跨浏览器)通过 clientWidth 和 clientHeight 获取事物的大小。

我编写了稍微简化的版本 here .

对于第 4 点,你说的倒霉是对的。可以在设置宽度和高度之前进行检查,如果不需要调整大小则让 Canvas 单独放置,这将消除一些重绘,但您无法摆脱所有重绘。

编辑:波特曼指出我搞砸了居中风格。更新版本 here .

关于javascript - 相对大小的 HTML Canvas,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7169879/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com