个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
经过一些研究和反复试验，我写了以下条形图:
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;
}
一切都是根据 Canvas 的高度和宽度计算的，但是我应该如何设置它们呢？什么值在移动和桌面设备上看起来不错。我不使用任何框架，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="http://127.0.0.1:8000/1/results/"></iframe>" readonly /></label></p>
<script src="/static/js/shortcuts.js"></script>
<script src="/static/polls/js/results.js"></script>
</body>
</html>
最佳答案
浏览器使用 innerWidth 提供有关浏览器窗口大小的信息。 , innerHeight , outerWidth , outerHeight , screenX , 和 screenY
例如:设置 Canvas 分辨率以匹配浏览器的页面。
canvas.width = innerWidth;
canvas.height = innerHeight;
注意:所有像素值都是 CSS 像素，可能不是实际的物理像素，例如当客户端缩放页面时，或者显示器是视网膜或非常高分辨率的显示器时。由于双线性过滤，这可能会导致 Canvas 图像质量较低。没有检测视网膜或缩放的标准方法，因此 this answer如果这是一个问题，则给出一个简单的解决方案 this answer给出了更详细的检测视网膜/高分辨率显示器的方法。
您还可以使用 the screen对象以获取有关设备屏幕的信息。
关于javascript - 如何在移动和桌面设备上缩放 Canvas ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43436661/
25
4
0
这显然有可能导致一场激烈的 war ，但无论如何，我试一试……(目前)还没有任何明确的答案。 在我的一台机器上，我确实被切换/升级到 Matlab 2012b。这是一个漂亮的新桌面，好吧。但出于很多原
当我的 Docker 容器启动时，我收到以下通知: Docker Desktop has detected that you shared a Windows file into a WSL 2 co
我希望能够(从服务器)连接到远程 PC 并能够访问其文件。我正在尝试使用 PHP 或 JavaScript 来完成此操作。 所以我想知道 1) 是否可能以及 2) 如何做到。 有人有任何示例/解决方案
我想使用 DirectX 为 Windows 7 制作动画桌面背景。我正在使用 C#、SlimDX 和几个 Windows API 函数的 P/Invoke 导入。我对 native Windows
是否可以为 Mac 开发动态桌面？我所说的“动态”是指其图像采用系统参数(例如时间和作业信息)并使用此信息来更新图像的桌面。有关图像状态的信息也将在 session 之间保留。我不是在谈论电影或随机但
我正在 LibGDX 中构建一个仅限桌面的应用程序。该游戏内置了一个 map 编辑器，您可以切换到并更改游戏 map 。我想添加一个功能，如果用户单击关闭窗口并且有未保存的编辑，它会提示您是否要在关闭
有没有像样的Windows桌面JSON lines (JSONL)格式查看器？ 这种格式也称为: 行分隔的 JSON (LDJSON) 换行符分隔的 JSON (NDJSON) 我正在寻找至少能够从
我有一个UITableView，它在单元格中显示大量图像，并且我对滚动性能并不满意。我的 UITableView 类似于 iPhone 上的照片应用程序。有谁知道为什么 iphone 照片应用程序滚动
let img1 = document.createElement('img'); img1.setAttribute('src', 'https://caniuse.com/img/browsers
我在同一窗体上有两个不同的网格控件。它们共享相同的上下文菜单。当我选择上下文菜单项时，我无法确定哪个控件是所有者。 最佳答案 ContextMenuStrip 类的 SourceControl 属性将
我已经安装了 Docker Desktop ( version : 2.3.0.4 ) 并启用了 Kubernetes . 我部署了几个 PODS，一切正常，从昨天开始，我遇到了下面提到的一个奇怪的问
我正在制作需要实现TableView的应用程序。 我想将背景图像应用到桌面 View 。 谁能帮我解决这个问题。我正在使用下面的代码来创建 TableView Titanium.UI.setBackg
我在同一窗体上有两个不同的网格控件。它们共享相同的上下文菜单。当我选择上下文菜单项时，我无法确定哪个控件是所有者。 最佳答案 ContextMenuStrip 类的 SourceControl 属性将
您能建议一些库在我的桌面 Java 应用程序中创建雷达图吗？ 谢谢 最佳答案 似乎JFreeChart提供了SpiderWebPlot 。 images for which看起来像雷达图。 关于jav
这个问题已经有答案了: 已关闭10 年前。 Possible Duplicate: Not possible to launch a file on a network using Java Desk
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
我想知道是否可以(使用JAVA)识别用于发出请求的计算机类型，例如:服务器、台式机、PDA(平板电脑、手机等)？ 谢谢! 最佳答案 取决于您使用什么来接受请求。对于 http 请求，信息位于请求 he
我添加了一个事件处理程序，用于滚动到我的桌面 View ，但它仅在我使用滚轮滚动时才起作用，但我也需要它在您单击并拖动滚动条时起作用。任何想法有什么问题吗？我尝试使用不同的方法来处理该事件，但没有一个
我想开始开发桌面 Java 应用程序，并且我想知道 Java 社区使用什么。 我从 Swing 开始，但发现它非常初级。 我习惯于在 Visual Studio 2010 中使用 .net c# WP
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，
我是一名优秀的程序员,十分优秀！