个人中心
文章发布
退出
作者热门文章
- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
25
4
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Growing Circles</title>
</head>
<body>
<canvas id="c" width="960" height="720"></canvas>
</body>
</html>
JavaScript
var canvas = document.getElementById( "c" ),
ctx = canvas.getContext( "2d" );
ctx.lineWidth = 3;
ctx.beginPath();
ctx.arc( 500, 350, 60, 0, 2 * Math.PI, false );
ctx.fillStyle = "#4DA54D";
ctx.fill();
ctx.strokeStyle = "DarkRed";
ctx.stroke();
ctx.beginPath();
ctx.arc( 500, 350, 120, 0, 2 * Math.PI, false );
ctx.strokeStyle = "OliveDrab";
ctx.stroke();
ctx.beginPath();
ctx.arc( 500, 350, 180, 0, 2 * Math.PI, false );
ctx.strokeStyle = "#530053";
ctx.stroke();
ctx.beginPath();
ctx.arc( 500, 350, 240, 0, 2 * Math.PI, false );
ctx.strokeStyle = "#208181";
ctx.stroke();
ctx.beginPath();
ctx.arc( 500, 350, 300, 0, 2 * Math.PI, false );
ctx.strokeStyle = "#CC7A00";
ctx.stroke();
ctx.beginPath();
ctx.arc( 500, 350, 360, 0, 2 * Math.PI, false );
ctx.strokeStyle = "#205450";
ctx.stroke();
我要分This demo使用线条进入 24 小时时间线。我尝试了一些但没有达到标准。代码量很大!有没有其他方法可以用一小段代码解决这个问题，比如在 Tried demo 中使用 slice ？
我的要求是按照This demo做的.我想要 This demo 24/7 切片，其中 24 代表小时，7 代表天。
进一步要求::即使我必须能够访问 particular arc我想要这取决于 day and hour !
最后我想看看这个样子Image我将传递参数(天、小时、颜色)，然后那个特定的部分应该改变颜色，如图中所示。
这就是我尝试打印数字的方式.. function drawnumbers(){ 但我希望它们像 png 图像一样在外圈
for(var i=1; i< hours+1;i++){
context.font="18px sans-serif";
context.fillText(+i,20+i*30,20+i*30);
}
}
最佳答案
虽然Harsh已经提供了一个非常有用的答案，它与您描绘的线框图有关。
我认为向您展示如何实现各个线段的绘制也会很有用。
我认为您对 PNG 的要求有点过高，因为我们实际上会为您创建您的元素，但根据我的回答和 Harsh 的回答，我相信您可以得到您想要的:
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// centre or center for US :) the drawing
var x = canvas.width / 2;
var y = canvas.height / 2;
// number of days
var days = 7;
// number of hours
var hours = 24;
// one segment represents an hour so divide degrees by hours
var segmentWidth = 360 / hours;
// begin at 0 and end at one segment width
var startAngle = 0;
var endAngle = segmentWidth;
// how thick you want a segment
var segmentDepth = 30;
function init() {
for (var i = 1; i <= days; i++) {
drawSegments(i * segmentDepth);
}
}
function drawSegments(radius) {
for (var i = 0; i < hours; i++) {
context.beginPath();
context.arc(x, y, radius,
(startAngle * Math.PI / 180), (endAngle * Math.PI / 180), false);
context.lineWidth = segmentDepth;
context.strokeStyle = '#' +
(Math.random() * 0xFFFFFF << 0).toString(16);
context.stroke();
// increase per segment
startAngle += segmentWidth;
endAngle += segmentWidth;
}
}
// start drawing our chart
init();
查看我的 http://jsfiddle.net/U2tPJ/6/演示。
关于javascript - 如何使用 Canvas 将圆圈分成 24/7 等份？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18188439/
25
4
0
简单问题:如何指定分割窗口中的字符数？ C-x-3 将我的窗口均匀分割为两个窗口，但随后的分割会将其中一个窗口分成两半。我想要 3 个大小相同的 window 。文档说我应该能够指定左缓冲区的字符数作
我需要一个程序，可以接受用户输入的数据数量和长度(英尺和英寸或仅英寸)，并将这些项目分为 40 组。 我最初尝试在 Excel 中完成此任务，但我不确定是否可以完成。 var cutList = [
这个问题已经有答案了: Why does the division of two integers return 0.0 in Java? [duplicate] (6 个回答) 已关闭 5 年前。
我想知道在使用布局 (MigLayout) 时我可以分成 2 行而不是两列吗？ panel.add(fname,"split 2"); panel.add(Fname,"wrap, pushx, gr
我几乎有一个像下面这样的代码，我正在尝试添加 每 6 个结果之后。 echo ""; $query="SELECT * WHERE id='$id' ORDER BY date ASC"; $resu
我在 android 2.2 中创建了一个选项卡 fragment ，带有 android 兼容性支持库 ，现在在我的应用程序中我几乎没有 Activity ，其中一些是扩展 Activity 类和其
这是我的 question 的扩展. 为了让它更简单让我们假设我有一个 pandas 数据框，如下所示。 df = pd.DataFrame([[1.1, 1.1, 2.5, 2.6, 2.5, 3.
我正在开发 Windows Phone 8 应用程序，其中我有一个 Stackpanel，我想在其中放置 7 个矩形。我希望这些矩形具有相同的高度，无论屏幕尺寸如何。我尝试设置 Height="*"
我一直相信java使用UTF-16在内部对其字符进行编码。它使用 u+xxxx 的事实证实了这一点。表示字符代码的格式以及它使用 16 位存储 char 的事实。 . 但有时UTF-16需要超过 2
我正在开发 Windows Phone 8 应用程序，其中我有一个 Stackpanel，我想在其中放置 7 个矩形。我希望这些矩形具有相同的高度，无论屏幕尺寸如何。我尝试设置 Height="*"
为了重新编码 malloc 函数，我执行了 sbrk(stack) 其中: void *malloc(size_t size) { stack = 0; while (stack start
寻找一个 css 或 jquery 解决方案来将这些动态加载的表分解为每行最多 6 个，创建表的脚本将它们全部内联，有时一行中显示多达 32 个 td.tables。我怎样才能在最多只有 6 个内联显
我可以请求帮助将 UTF-16 数据流拆分成 block 吗？ 不幸的是，很难找到字母边界。 任何帮助表示赞赏，已经花了几个晚上在这上面，很想了解这个问题。 运行良好的 Java 版本(是否有任何自动
我正在使用 Contact Forms 7在 wordpress 安装中创建联系表单。创建的表单位于 here Contact Form 扩展是免费、灵活且易于使用的。但问题是，无论一个表单包含多少个
我想将一个字符串拆分为一系列子字符串以适合我的数据库，假设我的数据库 varchar 大小为 50。如果将原始字符串切割为最多 50 个字符，那么我需要在该字符串中包含尾随 (逗号)。例如， 我的原始
我必须用 css 做一个足球队盾牌，我的想法是用球队的颜色做一个圆圈，我已经用 1 种或 2 种颜色为盾牌做了圆圈，但我在使用 3 种颜色的盾牌时遇到了麻烦 我将其用于 2 种颜色的防护罩 .equi
如果我有 1000 美元(可变)，我想把这笔钱分给 20(可变)人，但不是平均地给每个人，我想给第一个人更多，然后第二人称等 所以第 20 个人得到的最少，第 5 个人得到的第 5 多。 我将如何实现
我需要一种算法，将数字 n 分成 k 部分，并增加限制，即每个分区元素必须在 a 0 and k > 0: for x in range(a, b+1): fo
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: Swing: How do I set a component height to the containe
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visit the help center . 关闭 9
我是一名优秀的程序员,十分优秀！