Canvas 绘制时钟_技术问答

慕工程1598804

那两个关联文件能说一下吗: 关联文件？js和html？; 2018-12-21 1回答·1171浏览

四方果和

不明白r-30和r-18是什么，还有rad和x,y用到的数学表达式是什么意思，不明白function(number,i)为什么number就是前面数组的数字

像素,原canvas框宽高为200px,圆半径r 为100px,要减去外圆10px,以及时针要短一点所以r 减去30
整点数字的x位置 = Math.cos(rad)*(r-30); y位置 = Math.sin(rad)*(r-30);
rad的设置 var rad = 2*Math.PI /12 * i; 因程式不接受角度,只接受弧度,因此每个整点的弧度为 2 pi /12 ==>每个整点弧度 * i (顺序从3开始)
function(number,i) , number 指 var hourNumber=[3,4,5,6,7,8,9,10,11,12,1,2]; i 指的是 1~12 的顺序

2018-11-17 2回答·2458浏览

慕粉3727899

文档哪里找呢: 已采纳随_意的回答; http://www.w3school.com.cn/这个网站; 2018-07-06 1回答·1218浏览

慕粉3727899

number: 了解下 Array.forEach(); 2018-07-05 3回答·1454浏览

悬崖冰

为什么我的图只有三点钟的数字对不齐呢，麻烦大家帮我看看: 因为你把垂直和水平对齐放到了循环里面，导致第一次填充数字的时候是先填充后对齐所以没用，要把对齐放到循环上面; 2018-02-08 1回答·1891浏览

慕运维5539158

分钟不出来: 问题找到了，ctx打成stx了，粗心呐; 2018-01-16 1回答·1191浏览

慕粉1469056768

在DW打，在；浏览器上没有显示: 不应该这个上面的不存在兼容性问题应该是你哪里敲错了; 2017-12-01 1回答·1315浏览

慕粉1472808693

为什么我照着老师的写，但是我的圆是半圆，数字也只显示一半的了: 已经解决了，谢谢。画布宽高设置错了。写成css样式了; 2017-11-16 2回答·1584浏览

Gean01

为什么秒的弧度计算也是乘以索引: 从3点的位置开始画秒，刚好画一圈。; 2017-08-23 2回答·1406浏览

Gean01

为什么要减30: 2017-08-22 2回答·1125浏览

白小纯King

哪位大神帮我看看这是为什么？？这个秒点不是圆的: 你话圆的时候多写了一位像这样cxt.arc(x, y, 2,2, 0, 2*Math.PI);多写了一个2; 2017-07-28 1回答·1035浏览

________________KR

forEach？？？: 遍历hournumber这个数组，跟for循环的效果一样; 2017-07-12 1回答·895浏览

weibo_戴帽子的小姑凉100_0

想问（number,i)那个参数i是什么意思: 已采纳 ClayXX 的回答; rad=2*Math.PI/12 每小时弧度乘以i就是你想要的小时数该有的弧度; 2017-04-16 1回答·1654浏览

Freen247

为什么不加黑色的设置显示是灰色？默认是灰色吗？: 已采纳 CIAGIFID 的回答; 应该是用了灰色的环境; 2017-03-26 2回答·1512浏览

慕莱坞4826981

ctx.fillStyle="#000"; //没有这一句，数字的点没法黑色: 当然不行了，得改回来; 2017-03-09 2回答·1200浏览

cutecat1234567890_

急急急

已采纳我爱吃牛排的回答

<!DOCTYPE html>

<html>

<head>

<title>canvas clock</title>

<style>

div{

text-align: center;

margin-top: 250px;

}

#clock{

border:10px solid #ccc;

}

</style>

</head>

<body>

<div>

</div>

</body>

var dom = document.getElementById("clock");

var ctx = dom.getContext('2d');

var width = ctx.canvas.width;

var height = ctx.canvas.height;

var r = width / 2;

function drawBackground(){

"use strict";

ctx.translate(r,r);

ctx.beginPath();

ctx.lineWidth = 10;

ctx.arc(0,0,r-5,0,2*Math.PI,false);

ctx.stroke();

}

drawBackground()

</script>

</html>

这是按你的代码基本一摸一样打的我是可以出来的你可以复制去试试不行那就换浏览器火狐或者chrome

2017-03-08 6回答·1661浏览

司浩

效果出不来: js代码没有问题看看你是不是HTML页面写错了你可能忘记引入你这个JS了还有IE9以下的不支持的哦; 2017-03-08 2回答·735浏览

T3T哇呱

老师您好，在没有加入添加60个点的for语句以及后面的代码时还可以显示，加上之后就不行了，请问是哪里出了问题呢？: 已采纳慕粉1830182492 的回答; 倒数第二句，0后面的分号打错了; 2017-03-06 2回答·1157浏览

纵使不如意丶但仍在坚持

求这两代码的区别，上面的代码不能画圆: 你好，我刚刚做了一下，是正确的，可以画出圆; 2017-02-20 2回答·981浏览

慕粉3954924

为什么画秒针的时候，半径是2，

下面这句代码的意思是划出60个实心点啊：

ctx.arc(x,y,1,0,2*Math.PI,false);
ctx.fill();

这里的半径是用于限定这60个圆点的大小的。

2016-12-24 3回答·1013浏览

慕莱坞8065122

jQuery用的什么插件: sublime 的jQuery插件啊; 2016-12-20 2回答·916浏览

boysheep

我的只有矩形的边框啊。求解。

已采纳离玮的回答

希望能够解决你的问题。

2016-12-07 3回答·1036浏览

书墨谈谈

时钟小时数的数字圆: 应该整个圆盘的半径就是R 数字是r-10可能就没空间去显示了可以多减去一点; 2016-11-30 1回答·210浏览

qq_奇际号船长_03613499

老师用的是那个app？: sublime Text; 2016-11-21 1回答·676浏览

SONG_S

谁帮我看一下哪错了，为什么出不来效果，只有一个矩形出来了？: 浏览器问题，H5的canves本就很多不同--针对不同browser！; 2016-11-20 3回答·975浏览

飘转

为什么画黑点那边的if分支，如果不加fillstyle为黑色，就只有3那个点是黑色，它默认样式不就是黑色吗？为什么不加不行呢: 已采纳慕勒0538261 的回答; 默认填充色是黑色，但是当执行第一次else后，就重置了fillStyle为灰色，如果在if中不重新设置下填充色，就会被一直是灰色; 2016-11-20 1回答·827浏览

慕粉3978341

看不懂看不懂求解求解: 为了不让数字压到圆 !; 2016-11-10 1回答·678浏览

啊啊啊3825077

为什么秒针的点怎么出不来: 2016-11-04 2回答·668浏览

qq_悄悄_0

forEach后面跟的function中的number和i不用定义就可以用的吗？: 已采纳慕仔7504742 的回答; number 是数组的元素，i 是当前遍历位置，是直接用的。; 2016-11-01 3回答·1130浏览

滴答滴滴答滴

forEach不是JAVA 中的吗？: 已采纳慕仔1661316 的回答; forEach是js里对象的方法，和java里的没关系; 2016-10-27 4回答·844浏览