Canvas 绘制时钟_技术问答

首页免费课 Canvas 绘制时钟问答

Canvas 绘制时钟

                
                Silva Zhou
            Web前端工程师

                    查看讲师更多课程 
                    Silva Zhou讲师的其他课程
                
Requirejs和自动打包
中级·14715
免费课程
                                
                难度中级
            
                时长 1小时 0分
            
                学习人数
            
综合评分9.73
                            141人评价
                        查看评价
                                9.8
                                内容实用
                            
                                9.7
                                简洁易懂
                            
                                9.7
                                逻辑清晰

全部评论问答未解决精华

为什么清楚第一次左下角4分之1没了，第二次全没了

已采纳回答 / 慕工程0708615

得看下你的代码，在draw（）函数里面的ctx.restore（）之前的函数（drawSecond（））里面的开始不需要ctx.save()，后面也不需要ctx.restore()，我的一开始就是因为设置秒针的函数的开头设置了个ctx.save(),右下角四分之一没了，因为你在设置秒针的开头设置一个ctx.save（）会导致draw里面的清除函数的画布原点，变成秒针的原点，也就是圆的中心点，今天才刚开始学canvas，也不知道我理解的对不对，反正你可以试试

2 回答 1348 浏览 4-2 Canvas时钟特效

2017-02-18

慕的地5674456

0.0为什么那么啰嗦。。。

0 2-1 Canvas 绘制时钟--几何模型

2017-02-16

请问谁有码源吧

最新回答 / 慕用4156828

其实最后一步没做！

2 回答 1048 浏览 2-1 Canvas 绘制时钟--几何模型

2017-02-16

许爸比

谢谢老师的demo。
已上传自己的博客公告栏作为装饰。
http://www.cnblogs.com/lixu880/ 欢迎大家来看，菜鸟一枚

4 4-2 Canvas时钟特效

2017-02-15

qq_只如初见_9

讲的很好，简单明白

0 4-2 Canvas时钟特效

2017-02-15

h5 clearRect()方法无法清除画布内容

最新回答 / 慕用2870657

最大的可能是你拿错参数了，是height参数，length参数在清除之前效果是一样的。

1 回答 963 浏览 4-1 Canvas动态的时分秒

2017-02-14

慕娘9718091

要是学前端老是接触在些数学那我就废了

1 2-1 Canvas 绘制时钟--几何模型

2017-02-11

崔华乐

很详细，思路清晰，内容易懂，讲的很好！

0 4-2 Canvas时钟特效

2017-02-11

爱看书的扫地僧

老师肯定是湖北的，我听出了雷布斯的口音，不过讲的真好

1 4-2 Canvas时钟特效

2017-02-10

爱看书的扫地僧

很棒的课既有趣，又生动，还实用，谢谢老师的分享

5 4-1 Canvas动态的时分秒

2017-02-10

慕粉2112498918

关于 var hourNumbers = [3,4,5,6,7,8,9,10,11,12,1,2] 小时数组为什么从3开始，我和老师有点不一样的意见，我觉得是因为未使用translate设置新的（0,0）时，（0,0）在canvas的左上角，所以它的右下角才为可显示的区域（一般x，y为正数），我们重新设置了（0,0）点之后，还是它的右下角x，y为正数，因此判断0,0点右侧为X轴正数区域，下侧为Y轴正数区域，所以0到90是右下角区域，所以角度才从3的位置开始打开，数组也从3开始。个人愚见，不知道有没有想错

0 3-2 Canvas绘制时钟内容

2017-02-09

谷谷酱

这边完全可以用循环来做，不需要用数据慢慢放，1-12，然后填充的数就是i，横坐标就是圆心加上cos（90-i*60）,纵坐标是减

0 3-2 Canvas绘制时钟内容

2017-02-09

Noblesse

分针也要跟着秒针的走动来走动的，贴下代码
function drawMinutes(minutes, seconds) {
ctx.save();
ctx.beginPath();
ctx.rotate(2 * Math.PI / 60 * (minutes + seconds / 60));
ctx.lineWidth = 3 * rem;
ctx.lineCap = 'round';
ctx.moveTo(0, 10 * rem);
ctx.lineTo(0, -r + 30 * rem);
ctx.stroke();
ctx.restore();
}

1 4-2 Canvas时钟特效

2017-02-05

慕仔4432925

哎，讲到数学了

0 2-1 Canvas 绘制时钟--几何模型

2017-02-01

柠檬萌不萌

2016-1-15 春节？？？

1 3-2 Canvas绘制时钟内容

2017-01-24

柠檬萌不萌

明白个卵 QAQ ~~

2 2-1 Canvas 绘制时钟--几何模型

2017-01-24

首页上一页 17 18 19 20 21 22 23 下一页尾页

开始学习

课程须知: javascript基础知识

老师告诉你能学到什么？: 1、几何知识 2、从零学习canvas

微信扫码，参与3人拼团

热搜

最近搜索清空