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

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

javascript css html canvas

Javascript 如何在移动和桌面设备上缩放画布,javascript,css,html,canvas,Javascript,Css,Html,Canvas,经过一些研究和反复试验，我写了以下条形图： function extractResults(container) { var results = []; for (result of container.children) { var parts = result.innerText.split("-") results.push(parseInt(parts[1].trim().split(" ")[0])); } return

经过一些研究和反复试验，我写了以下条形图：

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;
}

函数提取结果（容器）{
var结果=[]；
for（container.children的结果）{
var parts=result.innerText.split（“-”）
push（parseInt（parts[1].trim（）.split（“”[0]））；
}
返回结果
}
var结果=提取结果（$（“#结果”）；
var画布=$（“#图表”）；
var ctx=canvas.getContext（“2d”）；
var裕度=画布宽度*0.005；
var bWidth=（canvas.width-（margin*results.length））/results.length；
var max=Math.max.apply（数学，结果）；
var yScale=画布高度/最大值；
var currX=保证金；
ctx.font=“20px Arial”
对于（i=0；i


所有内容都是基于画布的高度和宽度计算的，但是我应该如何设置它们呢？在移动设备和桌面设备上，什么样的价值看起来不错。我不使用任何框架，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>


结果-这个网站很棒吗易用胶卷

这个网站很棒吗？
2017年4月14日下午8:05（UTC）
此浏览器不支持图形

1.是的3票
2.没有0票
3.看起来糟透了一票

分享：
嵌入：
内部宽度和高度
浏览器通过、、和提供有关浏览器窗口大小的信息
例如：设置画布分辨率以匹配浏览器的页面
canvas.width  = innerWidth;
canvas.height = innerHeight;

注意：所有像素值都是CSS像素，可能不是实际的物理像素，例如当客户端缩放页面时，或者如果显示是视网膜或非常高分辨率的显示。由于双线性过滤，这可能导致画布图像质量较低。没有检测视网膜或缩放的标准方法，因此，如果这是一个问题，则提供了一个简单的解决方案，并提供了检测视网膜/高分辨率显示器的更详细方法
窗纱
您还可以使用object获取有关设备屏幕的信息。
我希望此链接能帮助您：