Question

经过一些研究和大量的试验和错误后，我写了下面的条形图：

function extractResults(container) {
    var results = [];
    for (result of container.children) {
        var parts = result.innerText.split("-")
        results.push(parseInt(parts[1].trim().split(" ")[0]));
    }
    return results
}
var results = extractResults($("#results"));
var canvas = $("#chart");
var ctx = canvas.getContext("2d");
var margin = canvas.width * 0.005;
var bWidth = (canvas.width - (margin * results.length)) / results.length;
var max = Math.max.apply( Math, results );
var yScale = canvas.height / max;
var currX = margin;
ctx.font = "20px Arial"
for (i = 0; i < results.length; i++)
{
    var bHeight = yScale * results[i];
    ctx.fillStyle = "green";
    ctx.fillRect(currX, canvas.height - bHeight, bWidth, bHeight);
    ctx.fillStyle = "black";
    ctx.fillText(i + 1, currX + bWidth / 2, canvas.height - canvas.height * 0.05, bWidth / 2);
    currX += bWidth + margin;
}

根据画布的高度和宽度计算所有内容，但我应该如何设置它们？在移动和桌面设备上看起来有什么价值。我没有使用任何框架，html看起来像这样：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Results - Is this site great? - easypolls</title>

    <link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="/static/css/style.css" />
    <link rel="stylesheet" type="text/css" href="/static/polls/css/polls.css" />
</head>
<body>
    <h2><a href="/">easypolls</a></h2><hr />

    <h3>Is this site great?</h3>
    <p>04-14-2017 8:05 p.m. (UTC)</p>
    <canvas id="chart"><p>Graphs are not supported by this browser.</p></canvas>
    <ul id="results">

            <li>1.Yes. - 3 votes</li>

            <li>2.No. - 0 votes</li>

            <li>3.It looks awful! - 1 vote</li>

    </ul>

    <p><label>Share:<input type="text" value="http://127.0.0.1:8000/1/results/" readonly /></label></p>
    <p><label>Embed:<input type="text" value="<iframe src=&quot;http://127.0.0.1:8000/1/results/&quot;></iframe>" readonly /></label></p>


    <script src="/static/js/shortcuts.js"></script>
    <script src="/static/polls/js/results.js"></script>

</body>
</html>

Answer 1

内部宽度＆amp;高度

浏览器通过innerWidth，innerHeight，outerWidth，outerHeight，screenX和screenY <提供有关浏览器窗口大小的信息/ p>

例如：设置画布分辨率以匹配浏览器的页面。

canvas.width  = innerWidth;
canvas.height = innerHeight;

注意：所有像素值都是CSS像素，可能不是实际的物理像素，例如客户端缩放页面时，或者显示器是视网膜或高分辨率显示器。由于双线性过滤，这可能导致较低质量的画布图像。没有检测视网膜或缩放的标准方法，因此如果这是一个问题，this answer给出一个简单的解决方案，this answer提供了更详细的检测视网膜/高分辨率显示的方法。

Window.screen

您还可以使用the screen对象获取有关设备屏幕的信息。

如何在移动和桌面设备上缩放画布

1 个答案:

内部宽度＆amp;高度

Window.screen